HTML & CSS Hands-On - Position - Start

by Karin Huber

HTML

<div id="container">
  <div id="div1">Div 1</div>
  <div id="div2">Div 2</div>
  <div id="div3">Div 3, 20px nach rechts und 50px nach oben geschoben</div>
  <div id="div4">Div 4</div>
  <div id="div5">Div 5, 100px nach rechts, bleibt beim Scrollen 50px vor dem oberen Rand stehen</div>
  <div id="div6">Div 6</div>
  <div id="div7">Div 7</div>
  <div id="div8">Div 8</div>
  <div id="div9">Div 9</div>

  <div id="div10">Div 10, rechts oben</div>
  <div id="div11">Div 11, rechts unten</div>

  <div id="div20">Div 20, mitte oben, bleibt beim Scrollen</div>
  <div id="div21">Div 21, mitte unten, bleibt beim Scrollen</div>
</div>

CSS

/*body {
  margin-top: 200px;
  margin-bottom: 200px;
}*/

div[id*="div"] {
  width: 150px;
  height: 150px;
  border: 1px solid red;
  background-color: yellow;
}

/*#container {
  position: relative;
  border: 1px solid green;
}*/