css---窗口定位（固定定位）和滚动条设置
前端入门笔记之css（7）
窗口定位： 根据窗口进行定位。
- 有滚动条的话，窗口定位会一直跟着窗口的定位；（不管页面怎么滑动，窗口定位一直在窗口固定的位置，
广告栏类似的状态） - 有滚动条的话，绝对定位不会跟着窗口走。
{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>
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 style="height: 3000px;"><div class="myDiv3"><div class="myDiv1">div>div><div class="myDiv2">div>
body>
html>
截图：
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！