Positionner un élément par rapport à son conteneur

J'essaie de créer un graphique à barres horizontales empilées à 100% en utilisant HTML et CSS. Je voudrais créer les barres en utilisant DIVsdes couleurs d'arrière-plan et des largeurs de pourcentage en fonction des valeurs que je veux tracer. Je veux également avoir une grille pour marquer une position arbitraire le long du graphique.

Dans mon expérimentation, j'ai déjà fait empiler les barres horizontalement en attribuant la propriété CSS float: left. Cependant, j'aimerais éviter cela, car cela semble vraiment déranger la mise en page de manière déroutante. De plus, les lignes de la grille ne semblent pas très bien fonctionner lorsque les barres flottent.

Je pense que le positionnement CSS devrait être capable de gérer cela, mais je ne sais pas encore comment le faire. Je souhaite 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 genre de problème (même en dehors de ce projet de graphique particulier), donc j'aimerais une méthode qui soit:

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

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

position: relativemettra en page un élément par rapport à lui-même. En d'autres termes, les éléments sont disposés en flux normal, puis ils sont supprimés du flux normal et décalé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 autour de lui ne changeront pas avec lui (utilisez plutôt des marges négatives si vous voulez ce comportement).

Cependant, vous êtes probablement intéressé par position: absolutele positionnement d'un élément par rapport à un conteneur. Par défaut, le conteneur est la fenêtre du navigateur, mais si un élément parent possède position: relativeou est position: absolutedéfini dessus, il agira en tant que parent pour les coordonnées de positionnement de ses enfants.

Démontrer:

#container {
  position: relative;
  border: 1px solid red;
  height: 100px;
}

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

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

Dans cet exemple, le coin supérieur gauche de #boxserait 100 px vers le bas et 50 px à gauche du coin supérieur gauche de #container. Si elle #containern'a pas été position: relativedéfinie, les coordonnées de #boxseraient relatives au coin supérieur gauche du port d'affichage du navigateur.

Vous devez définir explicitement la position du conteneur parent ainsi que la position du conteneur enfant. La façon typique de faire cela 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;
}

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

Voici les valeurs de 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 qu'il aurait normalement.

#myelem {
    position : static;
}

position: fixe

Cela définira la position d'un élément par rapport à la fenêtre du navigateur (fenêtre). Un élément positionné fixe restera 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 du haut de son emplacement réel.

position: absolue

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 30px du haut et 300px de la gauche dans la page et il défilera avec la page.

Et enfin...

position relative + absolue

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

#container {
    position : relative;
}

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

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

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

J'espère que ce tutoriel vous aidera.

Le positionnement absolu positionne un élément par rapport à son ancêtre positionné le plus proche. Donc, mettez position: relativele conteneur, puis pour les éléments enfants, topet leftsera relatif à la partie supérieure gauche du conteneur tant que les éléments enfants ont position: absolute. Plus d'informations sont disponibles dans la spécification CSS 2.1 .

Si vous devez d'abord positionner un élément par rapport à son élément position: relative conteneur, vous devez d'abord l'ajouter à l'élément conteneur . L'élément enfant que vous souhaitez positionner par rapport au parent doit avoir position: absolute . La façon dont le positionnement absolu fonctionne est qu'il est effectué par rapport au premier élément parent positionné de manière relative (ou absolue) . Dans le cas où il n'y a pas de parent relativement positionné, l'élément sera positionné par rapport à l' élément racine (directement à l'élément HTML).

Donc, si vous souhaitez positionner votre élément enfant en haut à gauche du conteneur parent, vous devez faire ceci:

.parent {
  position: relative;
} 

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

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