1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > CSS 固定定位 position fixed

CSS 固定定位 position fixed

时间:2019-09-07 08:53:02

相关推荐

CSS 固定定位 position fixed

CSS 固定定位 position fixed

简单描述:固定定位是将某个元素固定在浏览器的某个确定的位置,不随滚动条的移动而变化;

注意:固定定位的位置是 相对当前浏览器窗口的

代码示例:

1.我们先在页面中输出一个标准情况下的 div 元素,不添加定位;

代码:

<!doctype html><html><head><meta charset="utf-8"><title></title><style>*{margin:0;padding:0;}.abc{width:200px; height:200px; background-color:red; border:2px solid yellow;}</style></head><body><div class="abc"></div></body></html>

显示如下:

2. 然后给 div 元素添加固定定位:设置 position:fixed; left:100px; top:100px;

代码:

<!doctype html><html><head><meta charset="utf-8"><title></title><style>*{margin:0;padding:0;}.abc{width:200px; height:200px; background-color:red; border:2px solid yellow;position:fixed; left:100px; top:100px;}</style></head><body><div class="abc"></div></body></html>

显示:

3.我们再次修改定位: position:fixed; right:100px; top:100px;

显示效果:

可以看出坐标系是不断变化的,

那么:left + top: 相对于 左 上 顶点进行位移

left+bottom:相对于 左 下 顶点进行位移

right +top:相对于 右 上 顶点进行位移

right +bottom:相对于 右 下 顶点进行位移

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。