定位（position）
元素按照指定位置移动
margin负值
- 破坏文档流进行移动
- 应用：内容区域和前面模块重叠
标准文档流
- 在页面布局过程中，元素从上到下，从左到右，块级元素独占一行，行级元素共享一行的排列规范
脱离文档流：
- 在页面布局过程中，元素不再遵循标准文档流的规范，有自己的排列规范
破坏文档流
- 在页面布局过程中，元素在移动过程中不遵循标准文档流的规范，移动完成之后仍然在标准文档流中，只是在移动过程中破坏标准文档流的规则。
概述
定位是一种更加高级的布局手段
通过定位可将元素摆放到页面的任意位置
使用position属性来设置定位
可选值：
static：默认值，元素是静止的没有开启定位 静态定位relative： 开启元素的相对定位absolute：开启元素的绝对定位fixed：开启元素的固定定位sticky: 开启元素的粘滞定位
相对定位：
元素开启相对定位后，如果不设置偏移量，元素不会发生任何变化
偏移量（offset）：用来设置元素位置
top-定位元素和定位位置上边的距离bottom-定位元素和定位位置下边的距离left-定位元素和定位位置左边的距离right-定位元素和定位位置右边的距离
.相对位置是参照文档流中的位置进行定位的，参考的原来的位置进行移动
相对定位会提升元素的层级
相对定位不会使元素脱离文档流
相对定位不会改变元素的性质，块元素还是块元素，行内元素还是行内元素
如果相对定位元素原来的位置发生改变，相对定位随着移动，参考的原来的位置进行移动
绝对定位
开启绝对定位后，若不设置偏移量，元素的位置不会发生变化
开启绝对定位后，元素会从文档流中脱离
绝对定位会改变元素的性质，行内变成块，块的宽高被内容撑开
绝对定位会使元素提升一个层级，后面的元素会盖住前面的元素（开启绝对定位的元素）
绝对定位元素是相对于包含块
绝对定位的包含块：离它最近的开启了定位的祖先元素
包含块（containing block）：离当前元素最近的祖先块元素
如果所有的祖先元素都没有开启定位，则相对于整个文档/视口进行定位
绝对定位元素的布局：
水平布局：
left+margin-left+border-left+padding-left+width+padding-right+border-right+margin-right+right=包含块的内容宽度
当开启了绝对定位后：
- 水平方向的布局等式就需添加left 和 right 两个值
- 此时规则和之前一样只是多添加了两个值
当发生过度约束，若九个值中无auto 则自动调整right的值，以使等式满足
如果有auto，则自动调整auto 的值以使等式满足
- 可设置auto的值： margin width left right
垂直方向布局
- 垂直布局等式也必须要满足：
- top+margin-top+border-top+padding-top+height+padding-bottom+border-bottom+margin-bottom+bottom=包含块的内容高度
盒子垂直水平居中布局技巧
- 由于left 和 right ，top 和 bottom 的默认值是auto，所以如果不知道这四个值，则等式不满足时，自动调整这四个值
<style>
.container{
width: 800px;
height: 400px;
background-color: pink;
/* 设置定位父级 */
position: relative;
}
.box{
width: 200px;
height: 200px;
background-color: tomato;
margin: auto auto;
position: absolute;
/* 确定绝对定位元素的可移动的位置 */
top: 0;
left: 0;
bottom: 0;
right: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
</body>
通过calc函数进行计算，大盒子必须为正方形（宽度和高度相同）
<style> .container{ width: 400px; height: 400px; background-color: pink; overflow: hidden; } .box{ width: 100px; height: 100px; background-color: tomato; /* 通过calc函数进行运算,在大盒子是正方形 */ /* margin-top设置50%-小盒子高度的一半 */ margin-top:calc( 50% - 50px); /* margin-left设置50%-小盒子宽度的一半 */ margin-left: calc(50% - 50px ); } </style> </head> <body> <div class="container"> <div class="box"></div> </div> </body>方式三 利用定位和margin
<style> .container{ width: 800px; height: 400px; background-color: pink; position: relative; } .box{ width: 100px; height: 100px; background-color: tomato; position: absolute; top: 50%; left: 50%; margin-top: -50px; margin-left: -50px; } </style> </head> <body> <div class="container"> <div class="box"></div> </div> </body>方式四
.box1 { background-color: rgb(24, 177, 62); position: absolute; left: 50%; top: 50%; transform: translate(-50% ,-50%); }方式五
<style type="text/css"> .div1 { width: 100px; height: 100px; border: 1px solid #000000; display: flex; /* 水平空白分配 */ justify-content: center; align-items: center; } .div2 { height: 40px; width: 40px; background-color: red; } </style> <div class="div1 "> <div class="div2 "> </div> </div>
固定定位
- 将元素position 设置为 fixed
- 也是一种绝对定位，大部分特点与绝对定位一样
- 唯一不同的是：固定定位永远参考于浏览器的视口进行定位
- 固定定位元素不会随网页的滚动条滚动的
- 应用场景：小广告、头部导航固定、侧边栏导航固定等等
粘滞定位：兼容性差
将position设置为 sticky
和相对定位的特点基本一致，不同的是粘滞定位可以在元素到达某个位置时将其固定
元素的层级（z-index)
- 对于开启相对定位，绝对定位，固定定位，粘滞定位的定位元素，可以通过z-index属性来指定元素的层级
- z-index 需要一个整数作为参数，值越大元素的层级越高，元素的层级越高，越优先显示
- z-index:默认值 auto,相当于 0
如果元素层级一样，则优先显示靠下的元素
祖先元素的层级再高，也不会盖住后代元素
