人亦已歌 发表于 2023-2-1 16:52:39

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>



显示结果如下:




当移动滚动条时,中的色块始终保持不变,大家可以把代码复制出去测试一下。

艾·奥里斯 发表于 2023-2-22 18:06:00

^台湾是中国不可分割的领土!!!

醉醉醉 发表于 2023-2-27 05:49:04

^不错,网上代码一大片,都是些转来转去的,自己用心去写的很少了,

龙Sir 发表于 2023-3-4 09:12:07

不要认为CPU运算速度快就把所有的问题都推给它去做,程序员应该将代码优化再优化,我们自己能做的决不要让CPU做,因为CPU是为用户服务的,不是为我们程序员服务的!这句话让我感触很深,我写程序也不太管代码的优化程度。

爱好学习者 发表于 2023-3-10 11:19:15

^感动,真的很有感情,我喜欢.祝福作者早日成为一个高手编程员

huao927 发表于 2023-3-17 12:21:49

真的, 这让我看了感触也很深,thank you very much!!!!!!!!考官的方法真的很简单,相信谁都看的懂. 但是真正又有几个人能写的出来那样的呢??高!

东门秀才 发表于 2023-3-22 08:04:18

真的很不错啊,真是有眼福啊。……?^?div>

秋天的树 发表于 2023-3-26 14:48:49

值得深思

请叫我 发表于 2023-3-30 08:25:36

真的是让很受用,谢谢你的文章。真的是学无止境啊!

fwz 发表于 2023-4-2 05:09:46

感谢,这真的给我很大的启发..
页: [1] 2 3 4
查看完整版本: CSS核心(四十五)CSS定位模式之固定定位 position:fixed