CSS - Abschnitt festsetzen

Unterstützung: Mozilla Firefox, Google Chrome, Microsoft Edge (16)

<style>

.container {

 width: 300px;

 height: 150px;

 border: Solid 1px #ccc;

 overflow: Auto;

}



.heading{

  background: #ccc;

  height: 50px;

  line-height: 50px;

  margin-top: 10px;

  font-size: 30px;

  padding-left: 10px;

  position: -webkit-sticky;

  position: sticky;

  top: 0px;

}

</style>



<div class="container">

  <div class="heading">A</div>

  <div>Adrian</div>

  <div>Anna</div>

  <div>Albert</div>

  <div>Atos</div>



  <div class="heading">B</div>

  <div>Berta</div>

  <div>Balduin</div>

  <div>Bernd</div>

  

  <div class="heading">C</div>

  <div>Cindy</div>

  <div>Camilla</div>

  <div>Christian</div>

  <div>Christine</div>



  <div class="heading">D</div>

  <div>David</div>

  <div>Daniela</div>

  <div>Doris</div> 

  <div>Damian</div>

</div>

Bausteine  Alle Anzeigen

Eine zufällige Auswahl von Codeschnipseln aus den Bereichen HTML, CSS, PHP, JavaScript und MySQL.

<aside> Nebeninhalt

CSS - Kalender Symbol neben dem Datepicker

PHP - PDF-Dateien aus einer Auswahlliste hochladen

JavaScript - Zahl runden

MySQL - Daten aus zwei DB-Tabellen auslesen