<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box1{
height: 200px;
width: 200px;
background-color: darkkhaki;
}
.box2{
height: 200px;
width: 200px;
background-color: red;
position: relative;
left: 200px;
bottom: 200px;
}
.box3{
height: 200px;
width: 200px;
background-color:blue;
/* position 定位 */
/*默认值 元素未开启定位 */
/* position: static;
/*开启元素相对定位
1.元素不会脱离文档流
2.元素不会改变原有性质
3.元素参照文本流原本位置作为参考点
4.会提高元素层级
5.不设置偏移量仅开启则元素（所有内容）不会发生变化
*/
/* position: relative; */
/* 开启元素绝对定位
1.开启绝对定位不设置偏移量则元素的位置不会发生变化
2.开启绝对定位后元素会从文档流中脱离
3.绝对定位会改变元素的性质
4.绝对定位会使元素提高一个层级
5.绝对定位是以最近的父代元素的相对定位当参考点定位
6.水平布局多了left与right元素 ，如果各属性值没有auto
的情况下，则会自动调整right来达到等式相等，如果有auto
属性值，则不调整right改为调整auto值，垂直方向同理调整
bottom
*/
/* position: absolute; */
/* 开启元素的固定的定位
1.固定定位大部分与绝对定位相同
2.唯一不同的就是只以浏览器的视口作为参考点
3.不会随着滚动条滚动而看不见了
*/
/* position: fixed; */
/*开启元素的粘滞定位
1.与相对定位类似
2.粘滞定位可以在元素到达某个位置的时候将其固定
*/
/* position: sticky; */
/* 元素的层级
1.z-index:XXX xxx值越大层级越高
2.祖先后代关系及父子关系即使父级层级再高也不会覆盖子级
3.兄弟关系 下面的覆盖上面的
*/
z-index: 3;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
221
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
