CSS position
CSS position 属性用于指定一个元素在文档中的定位方式。top、right、bottom、left 属性则决定了该元素的最终位置。
切换窗口大小时位置不变。使用positon后标签会飘起，块级标签会变为行内标签，可通过增加左右距离拉伸边距。
position: fixed
- position: fixed 固定在页面的某个位置
- top:0px; 上边部分
- right:0px; 右边部分
- bottom: 0px; 下边部分
- left: 0px; 左边部分
position永久固定某个窗口
<html> <body> <!-- 像素长宽为50像素的框，字体为白色--> <div style=" 50px;height: 50px;background-color: black;color: white; /* position: fixed 固定在页面的某个位置 */ position: fixed; /* right:10px; 右边距离10像素 */ right:10px; /* bottom: 10px; 下边距离10像素 */ bottom: 10px; ;">xxx</div> <!-- 创建大的背景框--> <div style="height: 5000px;background-color: cornflowerblue">123</div> </body> </html>
<html> <head> <!-- 添加两个样式分别交给body引用 --> <style> .head { /* height: 48px;设置像素 */ height: 48px; /* background-color: cornsilk;设置背景颜色 */ background-color: cornsilk; /* color: #000;设置字体颜色 */ color: #000; /* position: fixed 固定在页面的某个位置 */ position: fixed; /* top: 0; 上边距离0像素 */ top: 0; /* right: 0; 右边距离0像素 */ right: 0; /* left: 0; 左边距离0像素 */ left: 0; } .body { /* background-color: cornsilk;设置背景颜色 */ background-color: antiquewhite; /* height: 5000px;设置像素 */ height: 5000px; /* margin-top: 48px;设置上边边距距离 */ margin-top: 48px; } </style> </head> <body> <div class="head">xxx</div> <div class="body">xxx</div> </body> </html>
position: relative + position: absolute
- position: relative; 单使用没有效果，设置后可再子标签内设置position: absolute;属性，实现依据父标签固定定位。
- position: absolute; 实现在父标签含有position:relative; 属性时，实现依据父标签固定定位。
position父标签内永久固定窗口
<html> <body> <!-- 添加边框并居中，添加position:relative; 属性--> <div style="position:relative; 500px;height: 200px;border: 1px solid red;margin: 0 auto;"> <!-- 添加position: absolute; 属性，实现依据父标签固定定位，添加框，固定再指定位置--> <div style="position: absolute;left: 0;bottom: 0px; 50px;height: 50px;background-color: black"></div> </div> </body> </html>
效果：
position 也可以通过 relative + absolute 完成三层 或 多层效果
<html> <body> <!-- 添加三层层样式 --> <div style=" /* z-index: 10; 设置层级顺序为最大 */ z-index: 10; /* position: fixed; 添加占用页面位置 */ position: fixed;top: 50%;left: 50%; /* 根据三层框自定义移动位置 使其在中间 */ margin-left: -250px;margin-top: -200px; /* 设置背景为白色长宽400，500像素的样式 */ background-color: white;height: 400px; 500px; ;"></div> <!-- 添加二层层样式 --> <div style=" /* z-index: 9; 设置层级顺序为二层 */ z-index: 9; /* position: fixed; 添加占用页面位置 */ position: fixed; /* 设置背景颜色，并设置长度0为全部覆盖 */ background: black;top: 0;bottom: 0;right: 0;left: 0; /* 设置透明度 */ opacity: 0.5; "></div> <!-- style 设置属性、height:48px 设置背景分辨率、background-color: green(绿) 修改背景颜色、 --> <div style="height: 5000px;background-color: green;"> xxxxxx </div> </body> </html>