10步学习CSS定位

日期:2009-12-17作者:woniu

字体大小: 小中大

10步学习CSS定位: position static relative absolute float：

HTML代码

<!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>
          
        
        </div>
        
        <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>
          
          <div id="div-after">
            <p>id = div-after</p>
          </div>
        </div>
        
      </div></td>
  </tr>
  <tr>
    <td></td>
  </tr>
  <tr valign="top">
    <td colspan="3"></td>
  </tr>
</table>
</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

[本日志由 woniu 于 2009-12-17 04:22 PM 编辑]

文章来自: 本站原创

引用通告: 查看所有引用 | 我要引用此文章

Tags: css定位 css布局 float 绝对定位

相关日志:

评论: 1 | 引用: 0 | 查看次数: -

ywee[2010-01-14 04:24 PM |

]

真是新手的福音阿！！！

发表评论

昵　称:
密　码:	游客发言不需要密码.
内　容:	正在加载编辑器...
验证码:
选　项:	禁止表情转换禁止自动转换链接禁止自动转换关键字

虽然发表评论不用注册，但是为了保护您的发言权，建议您注册帐号.