10步掌握CSS布局定位: position static relative absolute float

浏览数：28 / 时间：2015年06月09日

无意中看到此文，因作者强调其中避开了浏览器bug/分歧，所以个人认为值得借鉴。
不才仔细看了此文，自觉受益匪浅，屡试不爽，佩服作者对css布局的精炼总结，顺便小译了一段，
英文水平有限，且个人通常写写php，对css了解不深却有点兴趣，错误之处还请指正。
个人没有空间，代码中的css文件和js保留了完整路径：http://www.barelyfitz.com/screencast/html-training/css/positioning/
原文地址：http://www.barelyfitz.com/screencast/html-training/css/positioning/

如有转载，请注明原文出处，译过的就在这里了

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>10步掌握CSS定位: position static relative absolute float</title>
<link rel="stylesheet" href="http://www.barelyfitz.com/screencast/html-training/css/positioning/tabber.css" type="text/css" media="screen" />
<link rel="stylesheet" href="http://www.barelyfitz.com/screencast/html-training/css/positioning/tabber-print.css" type="text/css" media="print" />
<style type="text/css" media="screen">
#example {
    float:right;
}
#example div {
}
#div-before, #div-after {
    background-color:#eee;
    color:#000;
}
#div-1 {
    width:400px;
    background-color:#000;
    color:#fff;
}
#div-1-padding {
    padding:10px;
}
#div-1a {
    background-color:#888;
    color:#fff;
}
#div-1b {
    background-color:#666;
    color:#fff;
}
#div-1c {
    background-color:#aaa;
    color:#fff;
}
#example div p {
    margin:0 .25em;
    padding:.25em 0;
}
#description {
    float:left;
    width:40%;
}
pre {
    padding:1em;
    border:1px dashed #aaa;
    background:#fafafa;
}
p {
    margin:0.5em 0;
}
h3 {
    color:#999;
}
</style>
<link rel="alternate stylesheet" href="http://www.barelyfitz.com/screencast/html-training/css/positioning/1.css" type="text/css" title="1" media="screen" />
<link rel="alternate stylesheet" href="http://www.barelyfitz.com/screencast/html-training/css/positioning/2.css" type="text/css" title="2" media="screen" />
<link rel="alternate stylesheet" href="http://www.barelyfitz.com/screencast/html-training/css/positioning/3.css" type="text/css" title="3" media="screen" />
<link rel="alternate stylesheet" href="http://www.barelyfitz.com/screencast/html-training/css/positioning/4.css" type="text/css" title="4" media="screen" />
<link rel="alternate stylesheet" href="http://www.barelyfitz.com/screencast/html-training/css/positioning/5.css" type="text/css" title="5" media="screen" />
<link rel="alternate stylesheet" href="http://www.barelyfitz.com/screencast/html-training/css/positioning/6.css" type="text/css" title="6" media="screen" />
<link rel="alternate stylesheet" href="http://www.barelyfitz.com/screencast/html-training/css/positioning/7.css" type="text/css" title="7" media="screen" />
<link rel="alternate stylesheet" href="http://www.barelyfitz.com/screencast/html-training/css/positioning/8.css" type="text/css" title="8" media="screen" />
<link rel="alternate stylesheet" href="http://www.barelyfitz.com/screencast/html-training/css/positioning/9.css" type="text/css" title="9" media="screen" />
<link rel="alternate stylesheet" href="http://www.barelyfitz.com/screencast/html-training/css/positioning/10.css" type="text/css" title="10" media="screen" />
<script type="text/javascript">
function chooseStyle(title)
{
  setActiveStyleSheet(title);
}
var tabberOptions = {
  onTabClick:
  function(tabIndex)
  {
    chooseStyle(tabIndex+1);
  }
};
</script>
<script type="text/javascript" src="http://www.barelyfitz.com/screencast/html-training/css/positioning/styleswitcher.js"></script>
<script type="text/javascript" src="http://www.barelyfitz.com/screencast/html-training/css/positioning/tabber.js"></script>
<script type="text/javascript">
/* If the user has javascript, temporarily set the .tabber class to
   display:none */
//document.write(unescape(‘%3Cstyle%20type%3D%22text/css%22%3E%0A.tabber%20%7B%20display%3Anone%3B%20%7D%0A%3C/style%3E%0A‘));
</script>
</head>
<body >
<table id="layout_table" cellpadding="0" cellspacing="0" border="0" width="100%">
  <tr valign="top">
    <td id="block_left_kludge"></td>
    <td id="block_middle" width="100%" rowspan="2">
      <div id="content">
        <h1>10步掌握CSS定位: position static relative absolute float</h1>
        <div id="description">
          <div class="tabber">
            <div id="text-1" class="tabbertab" title="1">
              <h2>1. position:static</h2>
              <p>元素的 position 属性默认值为:<em>static</em>，即该元素出现在文档的常规位置，不会重新定位。</p>
              <p>通常此属性值可以不设置，除非是要覆盖之前的定义。</p>
              <pre>#div-1 {
 position:static;
}
</pre>
            </div>
            <div id="text-2" class="tabbertab" title="2">
              <h2>2. position:relative</h2>
              <p>设置了 <em>position:relative</em>，便可以结合<em>top</em> 、 <em>bottom</em>、 <em>left</em> 、 <em>right</em> 的属性来偏移其文档的常规位置。</p>
              <p>例如将 div-1 向下移动 20 像素、向左移动 40 像素:</p>
              <pre>#div-1 {
 position:relative;
 top:20px;
 left:-40px;
}
</pre>
              <p>注意 div-1 未被移动之前的地方，现在多了一点空隙，紧接着 div-1 的元素(div-after)却没有被移动，事实上即便 div-1 被移动了，<strong>它仍占据原始位置</strong>。</p>
              <p>貌似 <em>position:relative</em> 用处不大(我到觉得这点很有用)，但在后面的内容中显得尤为重要。</p>
            </div>
            <div id="text-3" class="tabbertab" title="3">
              <h2>3. position:absolute</h2>
              <p>设置了 <em>position:absolute</em>，即绝对定位，便可以将元素放在文档中任何想放的位置。</p>
              <p>例如将 div-1a 放置到右上角：</p>
              <pre>#div-1a {
 position:absolute;
 top:0;
 right:0;
 width:200px;
}
</pre>
              <p>注意！由于 div-1a 被移走, 页面中的其他元素位置也变了： div-1b, div-1c, div-after 都因此上移了。</p>
              <p>div-1a 被放置在页面的右上角。 能直接地定位元素很方便，但作用也不大。</p>
              <p>这里真正要做的是将 div-1a <em>相对于</em> div-1 定位，这就又要讲到 relative 属性了。</p>
              <h3>注</h3>
              <ul>
                <li>IE浏览器Bug：设置了相对宽度(如 "width:50%")，该宽度将基于父元素而非自身。</li>
              </ul>
            </div>
            <div id="text-4" class="tabbertab" title="4">
              <h2>4. position:relative + position:absolute</h2>
              <p>设置div-1的位置为 <em>relative</em> ， div-1中元素的定位都将相对于div-1。现将div-1a的position设为:absolute，可以实现将其置于div-1的右上角：</p>
              <pre>#div-1 {
 position:relative;
}
#div-1a {
 position:absolute;
 top:0;
 right:0;
 width:200px;
}
</pre>
            </div>
            <div id="text-5" class="tabbertab" title="5">
              <h2>5. 两列绝对定位</h2>
              <p>接下来使用relative 和absolute 实现两列的绝对定位：</p>
              <pre>#div-1 {
 position:relative;
}
#div-1a {
 position:absolute;
 top:0;
 right:0;
 width:200px;
}
#div-1b {
 position:absolute;
 top:0;
 left:0;
 width:200px;
}
</pre>
              <p>使用绝对定位(absolute positioning)的优点就是不需考虑元素在html中的位置，可以对元素任意放置，此处故意将div-1b放到div-1a之前；</p>
              <p>注意，还有个元素被绝对定位的元素遮住了，怎么办？</p>
            </div>
            <div id="text-6" class="tabbertab" title="6">
              <h2>6. two column absolute height</h2>
              <p>一种办法是设置固定高度。</p>
              <p>但不是万全之策，因为元素的高度、字体的大小并不总是确定的。</p>
              <pre>#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;
}
</pre>
            </div>
            <div id="text-7" class="tabbertab" title="7">
              <h2>7. float(浮动)</h2>
              <p>针对高度不定的情况，绝对定位不好用，于是想到另一方案。</p>
              <p>可以尽量使用向左或向右浮动来实现文字环绕，特别是环绕图片，此处用于更复杂的布局工作(也只有用这种方法)。</p>
              <pre>#div-1a {
 float:left;
 width:200px;
}
</pre>
            </div>
            <div id="text-8" class="tabbertab" title="8">
              <h2>8. 多列浮动</h2>
              <p>将两列都像左浮动，可以实现两列并列。</p>
              <pre>#div-1a {
 float:left;
 width:150px;
}
#div-1b {
 float:left;
 width:150px;
}
</pre>
            </div>
            <div id="text-9" class="tabbertab" title="9">
              <h2>9. 多列浮动后清除浮动</h2>
              <p>将元素浮动后，再使用"clear" 清除浮动，后面内容拉向下。</p>
              <pre>#div-1a {
 float:left;
 width:190px;
}
#div-1b {
 float:left;
 width:190px;
}
#div-1c {
 clear:both;
}
</pre>
            </div>
            <div id="text-10" class="tabbertab" title="10">
              <h2>10. Disclaimer & Resources</h2>
              <p>These examples are extremely simplified and do not trigger some of the CSS bugs in the Windows IE browser (of which there are <em>many</em>).</p>
              <p>The following page was invaluable:<br />
                <a href="http://www.autisticcuckoo.net/archive.php?id=2004/12/07/relatively-absolute">Relatively Absolute</a></p>
              <p>While you‘re here check out the following:</p>
              <ul>
                <li><a href="http://www.barelyfitz.com/projects/">BarelyFitz Designs Open-Source Software Projects</a></li>
                <li><a href="http://www.barelyfitz.com/screencast/">BarelyFitz Designs Screencasts</a></li>
              </ul>
            </div>
          </div>
          <!-- /class=tabber -->
        
        </div>
        <!-- /id="description -->
        <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>
        <!-- /id=example -->
      </div></td>
  </tr>
  <tr>
    <td></td>
  </tr>
  <tr valign="top">
    <td colspan="3"></td>
  </tr>
</table>
</body>
</html>