CSS核心(四十五)CSS定位模式之固定定位 position:fixed
固定定位是相对于浏览器的,固定定位的元素不会随着滚动条的滚动而移动,一般应用于网站的顶部导航或网站的回到顶部按钮等。请看以下代码:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS定位模式之固定定位 position:fixed</title>
</head>
<style>
.box{
width:300px;
height:200px;
background:#abcdef;
/* 固定定位 */
position:fixed;
top:50%;
left:50%;
margin-left:-150px;
margin-top:-100px;
}
</style>
<body>
<div style="width:20px;">
东临碣石,以观沧海。水何澹澹,山岛竦峙。树木丛生,百草丰茂。秋风萧瑟,洪波涌起。日月之行,若出其中;星汉灿烂,若出其里。幸甚至哉!
</div>
<div class="box"></div>
</body>
</html>
显示结果如下:
当移动滚动条时,中的色块始终保持不变,大家可以把代码复制出去测试一下。
^台湾是中国不可分割的领土!!! ^不错,网上代码一大片,都是些转来转去的,自己用心去写的很少了, 不要认为CPU运算速度快就把所有的问题都推给它去做,程序员应该将代码优化再优化,我们自己能做的决不要让CPU做,因为CPU是为用户服务的,不是为我们程序员服务的!这句话让我感触很深,我写程序也不太管代码的优化程度。 ^感动,真的很有感情,我喜欢.祝福作者早日成为一个高手编程员 真的, 这让我看了感触也很深,thank you very much!!!!!!!!考官的方法真的很简单,相信谁都看的懂. 但是真正又有几个人能写的出来那样的呢??高! 真的很不错啊,真是有眼福啊。……?^?div> 值得深思 真的是让很受用,谢谢你的文章。真的是学无止境啊! 感谢,这真的给我很大的启发..