Position

Il est parfois difficile de comprendre les conséquences de la modification de la valeur d'une propriété.

Nous proposons des animations pour comprendre le résultat obtenu lorsque vous utilisez l'attribut position ⇀ mdn

Situation de départ.

Mise en position:absolute du bloc B

How to : animation
Dans l'animation suivante  Animation, nous avons virtuellement décomposé l'action en trois phases

1. Le bloc B quitte le flux, C "remonte"
2. Prise en compte de la dimension Z
3. Le bloc B est positionné

Notion importante : le bloc conteneur

Nous nous posons ici la question de l'origine prise pour référence dans le calcul des distances.

Pour comprendre la problématique, il nous faut revoir la notion de flux ( ⇀W3Cschool).

Bloc conteneur (position: relative)

Bloc non conteneur (position: static)

How to : animation

Dans l'animation suivante, nous avons virtuellement décomposé l'action en quatre phases

1. Le bloc B quitte le flux, C "remonte"
2. Recherche du bloc conteneur (conteneur -> body -> html)
3. Le bloc B est positionné
4. Le conteneur passe en position:relative, il devient conteneur. Le Bloc B se positionne dans son conteneur.

Animation

Si vous avez compris, imaginez le résultat si vous enlevez la propriété position:relative au bloc de Try it Yourself »

div.relative {
  position: relative;
  width: 400px;
  height: 200px;
  border: 3px solid #73AD21;
}


float 

#a{

    float:left;

}

⇏action

<div id="conteneur"> 
    <div id="a">
    <div id="b">
    <div id="c"><div>

⇎action

#a,#c{
    float:left;
}




➽action