Skip to main content

Position & Overflow

Les classes de débordement vous permettent de contrôler le comportement d'overflow d'un élément.

Overflow​

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus justo vitae commodo facilisis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus justo vitae commodo facilisis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus justo vitae commodo facilisis.

HTML
  <div class="overflow-hidden">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus justo vitae commodo facilisis. </p>
  </div>
  <div class="overflow-x">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus justo vitae commodo facilisis. </p>
  </div>
  <div class="overflow-y">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus justo vitae commodo facilisis. </p>
  </div>

Détails des classes​

.oh, .overflow-hidden {
    overflow: hidden;
}
.overflow-x {
    overflow-x: auto;
}
.overflow-y {
    overflow-y: auto;
}

Positionnement​

Les classes de positionnement vous permettent de contrôler la position d'un élément sur la page.

Classes de positionnement​

Element avec position relative

Elément avec position absolute

Elément avec position initial

HTML
  <div class="position-relative">
    <p>Element avec position relative</p>
  </div>
  <div class="position-absolute">
    <p>Elément avec position absolute</p>
  </div>
  <div class="position-initial">
    <p>Elément avec position initial</p>
  </div>

Détails des classes​

.relative, .position-relative {
    position: relative;
}
.absolute, .position-absolute {
    position: absolute;
}
.position-initial {
    position: initial;
}