css---窗⼝定位（固定定位）和滚动条设置
前端⼊门笔记之css（7）
窗⼝定位： 根据窗⼝进⾏定位。
1. 有滚动条的话，窗⼝定位会⼀直跟着窗⼝的定位；（不管页⾯怎么滑动，窗⼝定位⼀直在窗⼝固定的位置，
⼴告栏类似的状态）
2. 有滚动条的话，绝对定位不会跟着窗⼝⾛。
{position：fixed；left:300px;top:300px}
固定定位代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>固定定位</title>
<style type="text/css">
*{margin: 0;padding: 0;}
.myDiv1{width: 200px;height: 200px;background: darkred;position: absolute;left: 300px;
top: 200px;z-index: 1;}
.myDiv2{width: 200px;height: 200px;background: pink;position: fixed;left: 300px;top: 200px;
z-index: -1;
}
</style>
</head>
<body>
<div class="myDiv1"></div><!-- 根据⽗级定位 -->
<div class="myDiv2"></div><!-- 根据窗⼝定位 -->
</body>css固定定位
</html>
截图效果：
滚动条设置：在body标签中添加超过窗⼝页⾯⼤⼩的设置
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>固定定位</title>
<style type="text/css">
*{margin: 0;padding: 0;}
.myDiv1{width: 200px;height: 200px;background: darkred;position: absolute;left: 300px; top: 200px;z-index: 1;}
.
myDiv2{width: 200px;height: 200px;background: pink;position: fixed;left: 300px;top: 200px; z-index: -1;
}
.myDiv3{
width: 200px;height: 200px;background: gold;position: relative;margin: 100px;
}
</style>
</head>
<body ><!-- 设置滚动条 -->
<div class="myDiv3">
<div class="myDiv1"></div><!-- 根据⽗级定位 -->
</div>
<div class="myDiv2"></div><!-- 根据窗⼝定位 -->
</body>
</html>
截图：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。