固定元素，不随页面改变位置position:fixed

最新推荐文章于 2022-09-13 10:42:15 发布

佛佛ง

最新推荐文章于 2022-09-13 10:42:15 发布

阅读量5.9k

点赞数 2

分类专栏： CSS学习笔记

本文链接：https://blog.csdn.net/LzzMandy/article/details/84871437

版权

CSS学习笔记专栏收录该内容

26 篇文章 2 订阅

订阅专栏

当页面滑动到第2个页面时，黄色固定元素一直处于初始化的位置不变，实现这个功能：

1、使用position：fixed；还需要指定位置，比如top、right值等。

2、注意【需要固定的元素在html中放置的位置】

下面的代码中，“第2个固定” 显示在页面上，而 "第1个固定" 没有显示，因为“第2个固定”放在后面，这样会覆盖前面元素的z-index等级，如果想让 "第1个固定"显示，则需要添加 " z-index:999; ",使其等级高于其他元素即可。

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>练习的地方</title>
	<style>
	.divStyle{width: 1000px;height: 1000px;margin:20px auto;border: 1px solid red;}
	.fixed{position:fixed;top:30%;right:30%;width: 100px;height: 100px;border-radius: 50px;background: yellow;text-align: center;line-height: 100px;}
</style>
</head>
<body>
	<div class="fixed">第1个固定</div>
	<div class="divStyle">第1个页面</div>
	<div class="divStyle">第2个页面</div>
	<div class="fixed">第2个固定</div>
</body>
</html>

佛佛ง

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
0
评论
固定元素，不随页面改变位置position:fixed

当页面滑动到第2个页面时，黄色固定元素一直处于初始化的位置不变，实现这个功能：1、使用position：fixed；还需要指定位置，比如top、right值等。2、注意【需要固定的元素在html中放置的位置】下面的代码中，“第2个固定” 显示在页面上，而 "第1个固定" 没有显示，因为“第2个固定”放在后面，这样会覆盖前面元素的z-index等级，如果想让 "第1个固定"显示，则需...
复制链接

扫一扫