TryIt Editor v2.0 - CSS position all values example

Source Code: (back to article)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #box1 {
        position: static;
        border: 2px solid #666;
        width: 300px;
        height: 100px;
      }
      #box2 {
        position: absolute;
        border: 2px solid #8ebf42;
        top: 70px;
        right: 15px;
      }
      #box3 {
        position: relative;
        border: 2px solid #666;
        width: 300px;
        height: 100px;
      }
      #box4 {
        position: absolute;
        border: 2px solid #8ebf42;
        top: 70px;
        right: 15px;
      }
      #box5 {
        position: absolute;
        border: 2px solid #666;
        width: 320px;
        height: 100px;
        top: 750px;
        right: 25px;
      }
      #box6 {
        position: absolute;
        border: 2px solid #8ebf42;
        top: 70px;
        right: 15px;
      }
      #box7 {
        position: fixed;
        border: 2px solid #8ebf42;
        background-color: #eee;
        width: 300px;
        height: 100px;
        bottom: 0;
        left: 0;
        right: 0;
      }
      #box8 {
        position: absolute;
        border: 2px solid #666;
        top: 70px;
        right: 15px;
      }
    </style>
  </head>
  <body>
    <h2>Position property example</h2>
    <h3>Position: static</h3>
    <p>
      The Box1 element remains in the natural flow of the page and does not act as anchor point for the absolutely positioned Box2 element:
    </p>
    <div id="box1">
      Box1: position: static.
      <div id="box2">Box2: position: absolute, right: 15px, top: 70px</div>
    </div>
    <h3>Position: relative</h3>
    <p>
      The Box3 element remains in the natural flow of the page and also acts as anchor point for the absolutely positioned Box4 element:
    </p>
    <div id="box3">
      Box3: position: relative.
      <div id="box4">Box4: position: absolute, right: 15px, top: 70px</div>
    </div>
    <h3>Position: absolute</h3>
    <p>
      The Box5 element does not remain in the natural flow of the page. It positions itself according to the closest positioned ancestor and also acts as anchor point for the absolutely positioned Box6 element:
    </p>
    <div id="box5">
      Box5: position: absolute, top: 750px, right: 15px.
      <div id="box6">Box6: position: absolute, right: 15px, top: 70px</div>
    </div>
    <h3>Position: fixed</h3>
    <p>
      The Box7 element does not remain in the natural flow of the page and positions itself according to the viewport and acts as anchor point for the absolutely positioned Box8 element:
    </p>
    <div id="box7">
      Box7: position: fixed, bottom: 0, left: 0, right: 0.
      <div id="box8">Box8: position: absolute, right: 15px, top: 70px</div>
    </div>
  </body>
</html>