网页制作 发布日期:2025/11/4 浏览次数:1
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; }