(编辑:jimmy 日期: 2024/11/2 浏览:2)
position
用于定义一个元素是否absolute
(绝对),relative
(相对),static
(静态),或者fixed
(固定)。
static
值是元素的默认值,它会按照普通顺序生成,就如它们在的出现一般。的出现一般。
relative
很像static
,但可用top
、right
、bottom
和left
属性来偏移原始位置。
absolute
使元素从HTML普通流中分离出来,并把它送到一个完全属于自己的定位世界。在这个稍微疯狂的世界,这个绝对的元素可以放置到任何地方,只要设置了top
、right
、bottom
和left
的值。
fixed
的行为也很像absolute
,但参考于浏览器窗口相对于页面而放置绝对的元素,所以,理论上,当页面滚动的时候,固定元素完全保持在浏览器视区中。为什么说理论上的?不为别的,在Mozilla和Opera中工作得很好,但IE不会。
用绝对定位布局
<div id="navigation">
<ul>
<li><a href="this.html">This</a></li>
<li><a href="that.html">That</a></li>
<li><a href="theOther.html">The Other</a></li>
</ul>
</div>
<div id="content">
<h1>Ra ra banjo banjo</h1>
<p>Welcome to the Ra ra banjo banjo page. Ra ra banjo banjo. Ra ra banjo banjo. Ra ra banjo banjo. Ra ra banjo banjo.</p>
<p>(Ra ra banjo banjo)</p>
</div>
#navigation {
position: absolute;
top: 0;
left: 0;
width: 10em;
}
#content {
margin-left: 10em;
}
#navigation {
position: absolute;
top: 0;
left: 0;
width: 10em;
}
#navigation2 {
position: absolute;
top: 0;
right: 0;
width: 10em;
}
#content {
margin: 0 10em; /* setting top and bottom margin to 0 and right and left margin to 10em */
}
:first-letter
例子),但同样可以用在更大的块中,比如导航列。
#navigation {
float: left;
width: 10em;
}
#navigation2 {
float: right;
width: 10em;
}
#content {
margin: 0 10em;
}
clear
(清除)属性。clear: left
将清除左边元素,clear: right
将清除右边元素,而clear: both
会清除左边和右边。所以,举个例子,你需要一个页面脚注,你可以用id“footer”为HTML增加一个块,然后使用如下的CSS:
#footer {
clear: both;
}