CSS定位
一.定位的概念
css中的position属性,position有四个值:relative(相对定位)、absolute(绝对定位)、static(静态定位)和fixed(固定定位),通过top、left、bottom、right来调整元素位置
1.定位机制
CSS 有三种基本的定位机制:普通流、浮动和绝对定位。 除非专门指定,否则所有框都在普通流中定位。也就是说,普通流中的元素的位置由元素在 (X)HTML 中的位置决定
二.定位的四种属性
1.相对定位(relative)
- 相对定位,如果没有偏移量(left/right/top/bottom)就是正常显示;
- 根据原来的位置进行偏移
- 不会使元素脱离文本流
<style>
div{
position: relative;
background-color: red;
border-top:1px solid #000
}
</style>
2.绝对定位(absolute)
1.如果使用绝对定位,有定位祖先元素就相对于定位祖先元素发生偏移,没有定位祖先元素就会相对于整个文档发生偏移(绝对 相对 固定)
2.使元素脱离文档流和文本流
B{
position: absolute;
border-top:1px solid #000;
height: 100px;
width: 100px;
left: 30px;
top: 30px;
}
3.固定定位(position:fixed)
1.相对于整个窗口进行定位,不会受滚动条影响
2.使元素脱离文档流和文本流
3.固定定位的特点就是:无论如何滑动页面,固定定位的元素位置都不会被改变,完全脱离文档流。
另外,如果设置了固定定位的元素也设置了width或height的百分比值,那么此百分比的值是参照窗口宽高来计算的。
4.粘性定位
sticky:(这是 css3 新增的属性值)粘性定位。最初会被当作是relative,相对于原来的位置进行偏移;一旦超过一定阈值之后,会被当成 fixed 定位,相对于视口进行定位
1、父元素不能 overflow:hidden 或者 overflow:auto 属性。
2、必须指定 top、bottom、left、right4 个值之一,否则只会处于相对定位
3、父元素的高度不能低于 sticky 元素的高度
4、sticky 元素仅在其父元素内生效
三.z-index 设置元素的堆叠顺
z-index 的使用条件就是必须在使用了定位之后才可以生效
z-index属性是设置元素的层级,数值低的会被数值高的遮住