Learn CSS Positioning in Ten Steps

http://www.barelyfitz.com/screencast/html-training/css/positioning/

http://coding.smashingmagazine.com/2009/04/08/from-table-hell-to-div-hell/

1. position:static (Default)

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <style type="text/css">
/*<![CDATA[*/
  #example {
	float: right;
	}

  #example div p {
	margin: 0 .25em;
	padding: .25em 0;
  }

  #div-before, #div-after {
  background-color: #88D;
  color: black;
  }

  #div-1 {
  width: 400px;
  background-color: black;
  color: white;
  }

  #div-1-padding {
  padding: 10px;
  }

  #div-1a {
  background-color: #D33;
  color: white;
  }

  #div-1b {
  background-color: #3D3;
  color: white;
  }

  #div-1c {
  background-color: #33D;
  color: white;
  }
 
  /*]]>*/
  </style>

  <title></title>
</head>

<body>
  <div id="example">
    <div id="div-before">
      <p>id = div-before</p>
    </div>

    <div id="div-1">
      <div id="div-1-padding">
        <p>id = div-1</p>

        <div id="div-1a">
          <p>id = div-1a</p>

          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium
          dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra
          velit.</p>
        </div>

        <div id="div-1b">
          <p>id = div-1b</p>

          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium
          dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.
          Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis
          accumsan augue ipsum id lorem.</p>
        </div>

        <div id="div-1c">
          <p>id = div-1c</p>
        </div>
      </div>
    </div><!-- /id=div-1-padding /id=div-1 -->

    <div id="div-after">
      <p>id = div-after</p>
    </div>
  </div>
</body>
</html>

2. position:relative

If you specify position:relative, then you can use top or bottom, and left or rightto move the element relative to where it would normally occur in the document.

#div-1 {
 position:relative;
 top:20px;
 left:-40px;
}

3. position:absolute

When you specify position:absolute, the element is removed from the document and placed exactly where you tell it to go.

#div-1a {
 position:absolute;
 top:0;
 right:0;
 width:200px;
}

4. position:relative + position:absolute

If we set relative positioning on div-1, any elements within div-1 will be positioned relative to div-1. Then if we set absolute positioning on div-1a, we can move it to the top right of div-1:

#div-1 {
 position:relative;
}
#div-1a {
 position:absolute;
 top:0;
 right:0;
 width:200px;
}

5. two column absolute

relative + absolute (right=0) + absolute (left=0)

Note: div-after is at the behind of #div-1a and #div-1b

#div-1 {
 position:relative;
}
#div-1a {
 position:absolute;
 top:0;
 right:0;
 width:200px;
}
#div-1b {
 position:absolute;
 top:0;
 left:0;
 width:200px;
}

6. two column absolute height

#div-1 {
 position:relative;
 height:250px;
}
#div-1a {
 position:absolute;
 top:0;
 right:0;
 width:200px;
}
#div-1b {
 position:absolute;
 top:0;
 left:0;
 width:200px;
}

7. float

For variable height columns, absolute positioning does not work, so let’s come up with another solution.

We can “float” an element to push it as far as possible to the right or to the left, and allow text to wrap around it. This is typically used for images, but we will use it for more complex layout tasks (because it’s the only tool we have).

#div-1a {
 float:left;
 width:200px;
}

8. float columns

If we float one column to the left, then also float the second column to the left, they will push up against each other.

#div-1a {
 float:left;
 width:150px;
}
#div-1b {
 float:left;
 width:150px;
}

9. float columns with clear

Then after the floating elements we can “clear” the floats to push down the rest of the content.

#div-1a {
 float:left;
 width:190px;
}
#div-1b {
 float:left;
 width:190px;
}
#div-1c {
 clear:both;
}

相关文章：

你感兴趣的文章：

标签云：