Learn CSS Positioning in Ten Steps

最新推荐文章于 2024-09-14 08:09:14 发布

riverlau

最新推荐文章于 2024-09-14 08:09:14 发布

阅读量392

点赞数

分类专栏： CSS 文章标签： css float integer div layout rest

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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;
}

riverlau

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录