CSS - Position

le bloc sticky dont on parle en fin de page

Les blocs

Un titre pour une div.bloc

Aucun habillage, juste un clear avant et après. La bordure pointillée violet matérialise le contour sur cetté démo.

Utilisation: pour contenir des flottants ou le styler à sa guise.

Les bloc1, bloc2 et bloc3 permettent d'afficher du contenu centré mis évidence par une bordure et ombrage. Ajout de marges haut-bas et padding. La marge haute du premier enfant, ainsi que la marge basse du dernier enfant sont mise à zéro pour ne conserver que le padding du bloc.

Un titre pour une div.bloc1

Un titre pour une div.bloc2

Un titre pour une div.bloc3

Les positionnements

Absolue

abs-center
abs-left
abs-right
abs-top
abs-bottom
<div class="abs-bloc display-inline-block">
  <img src="/images/photos/Pingouins-mini.jpg" alt=""/>
  <div class="abs-center bg-orange">abs-center</div>
  <div class="abs-left bg-brun">abs-left</div>
  <div class="abs-right bg-brun">abs-right</div>
  <div class="abs-top bg-violet">abs-top</div>
  <div class="abs-bottom bg-violet">abs-bottom</div>
</div>
TEXTE EN HAUT
TEXTE EN BAS

Pensez à utiliser une largeur 100% et la justification texte

<div class="abs-bloc display-inline-block">
  <img src="/images/photos/Pingouins-mini.jpg" alt=""/>
<div class="abs-top bg-orange w12 tc">TEXTE EN HAUT</div>
<div class="abs-bottom bg-violet w12 tc">TEXTE EN BAS</div>
</div>

Sticky

La position sticky permet de "coller" la ligne lors du déplacement de la page

<div class="pos-sticky bg-violet tc p1">
  le bloc sticky dont on parle en fin de page dans 
  <a class="t-jaune b" href="#position">positionnement</a>
</div>

Flottant

Les traditionnelles classes pour les flottants

Float-right
Float-left
<div class="bloc">
	<div class="float-right w2 bg-violet">Float-right</div>
	<div class="float-left w2 bg-orange">Float-left</div>
</div>