web-dev-qa-db-fra.com

Positionner un élément HTML par rapport à son conteneur en utilisant CSS

J'essaie de créer un graphique horizontal à barres empilées à 100% en utilisant HTML et CSS. J'aimerais créer les barres à l'aide de fichiers DIV avec des couleurs d'arrière-plan et des largeurs de pourcentage dépendant des valeurs que je veux représenter graphiquement. Je veux aussi avoir une grille pour marquer une position arbitraire le long du graphique.

Lors de mes expérimentations, j'ai déjà obtenu l'empilement des barres horizontalement en attribuant la propriété CSS float: left. Cependant, je voudrais éviter cela, car cela semble vraiment déranger la mise en page de manière confuse. En outre, les lignes de la grille ne semblent pas très bien fonctionner lorsque les barres sont flottantes.

Je pense que le positionnement CSS devrait être capable de gérer cela, mais je ne sais pas encore comment le faire. Je veux pouvoir spécifier la position de plusieurs éléments par rapport au coin supérieur gauche de leur conteneur. Je rencontre régulièrement ce type de problème (même en dehors de ce projet de graphique), alors j'aimerais une méthode:

  1. Cross-browser (idéalement sans trop de piratage du navigateur)
  2. Fonctionne en mode Quirks
  3. Aussi clair/propre que possible, pour faciliter les personnalisations
  4. Fait sans JavaScript si possible.
htmlcsspositioning
172
Craig Walker

Vous avez raison, le positionnement CSS est la voie à suivre. Voici un bref aperçu:

position: relative mettra en forme un élément par rapport à lui-même. En d'autres termes, les éléments sont disposés en flux normal, puis supprimés du flux normal et compensés par les valeurs que vous avez spécifiées (haut, droite, bas, gauche). Il est important de noter que, comme il est supprimé du flux, les autres éléments qui l'entourent ne seront pas modifiés (utilisez plutôt des marges négatives si vous souhaitez ce comportement).

Cependant, vous êtes probablement intéressé par position: absolute qui positionnera un élément par rapport à un conteneur. Par défaut, le conteneur est la fenêtre du navigateur, mais si un élément parent est défini par position: relative ou position: absolute, il agira en tant que parent pour le positionnement des coordonnées de ses enfants.

Démontrer:

<div id="container">
   <div id="box"> </div>
</div>

#container {
  position: relative;
}

#box {
  position: absolute;
  top: 100px;
  left: 50px;
}

Dans cet exemple, le coin supérieur gauche de #box serait 100 pixels vers le bas et 50 pixels à gauche du coin supérieur gauche de #container. Si #container n'avait pas défini position: relative, les coordonnées de #box seraient relatives au coin supérieur gauche du port de vue du navigateur.

J'espère que cela pourra aider.

358
Bryan M.

Vous devez définir explicitement la position du conteneur parent avec la position du conteneur enfant. La façon typique de le faire est quelque chose comme ceci:

div.parent{
    position: relative;
    left: 0px;  /* stick it wherever it was positioned by default */
    top: 0px;
}

div.child{
    position: absolute;
    left: 10px;
    top: 10px;
}
16
Stephen Deken

Je sais que je suis en retard, mais j'espère que cela aidera.

Voici les valeurs pour la propriété position.

  • statique
  • fixé
  • relatif
  • absolu

position: statique

C'est par défaut. Cela signifie que l'élément se produira à une position normale.

#myelem {
    position : static;
}

position: fixe

Cela va définir la position d'un élément par rapport à la fenêtre du navigateur (viewport). Un élément positionné fixe reste dans sa position même lorsque la page défile.

(Idéal si vous voulez un bouton de défilement vers le haut dans le coin inférieur droit de la page).

#myelem {
    position : fixed;
    bottom : 30px;
    right : 30px;
}

position: relative

Pour placer un élément à un nouvel emplacement par rapport à sa position d'origine.

#myelem {
    position : relative;
    left : 30px;
    top : 30px;
}

Le CSS ci-dessus déplacera l'élément #myelem 30px vers la gauche et 30px à partir du haut de son emplacement actuel.

position: absolu

Si nous voulons qu'un élément soit placé à une position exacte dans la page.

#myelem {
    position : absolute;
    top : 30px;
    left : 300px;
}

Le CSS ci-dessus positionnera l'élément #myelem à une position située à 30px du haut et à 300px de la gauche de la page et défilera avec la page.

Et enfin...

position relative + absolue

Nous pouvons définir la propriété position d'un élément parent sur relatif, puis définir la propriété position de l'élément enfant sur absolu. De cette façon, nous pouvons positionner l'enfant par rapport au parent dans une position absolue.

#container {
    position : relative;
}

#div-2 {
    position : absolute;
    top : 0;
    right : 0;
}

Absolute position of a child element w.r.t. a Relative positioned parent element.

Nous pouvons voir dans l'image ci-dessus que l'élément # div-2 est positionné dans le coin supérieur droit de l'élément #container.

GitHub: Vous pouvez trouver le code HTML de l'image ci-dessus ici et CSS ici .

J'espère que ceci tutorial _ aide.

11
yusufshakeel

Le positionnement absolu positionne un élément par rapport à son ancêtre le plus proche. Donc, mettez position: relative sur le conteneur, puis pour les éléments enfants, top et left seront relatifs par rapport au coin supérieur gauche du conteneur tant que les éléments enfants auront position: absolute. Plus d'informations sont disponibles dans la spécification CSS 2.1 .

3
Jim

Si vous devez d'abord positionner un élément par rapport à son élément conteneur, vous devez ajouter position: relativeà l'élément conteneur. L'élément enfant que vous souhaitez positionner par rapport au parent doit avoirposition: absolute. La façon dont fonctionne le positionnement absolu est que cela se fait par rapport au premier élément parent relativement (ou absolument) positionné}. Dans le cas où il y a aucun relatif parent positionné, l'élément sera positionné par rapport au élément racine (directement à l'élément HTML).

Donc, si vous souhaitez positionner votre élément enfant en haut à gauche du conteneur parent, procédez comme suit:

.parent {
  position: relative;
} 

.child {
  position: absolute;
  top: 0;
  left: 0;  
}

Vous bénéficierez grandement de la lecture cet article . J'espère que cela t'aides!

0
Nesha Zoric