11.CSS定位

CSS定位

1.介绍

我们已经了解过布局相关的盒模型、浮动等属性，而定位是另一种布局的重要属性，常用于制作压盖或者位置相关的效果

2.相对定位

代码

p {
    position: relative
    left: -100px
}

参考位置

相对自己原来的位置

特点

• 不会脱离文档流，元素位置的变化，只是视觉效果上的变化，不会对其他元素产生任何影响
• 定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的
• 定位的元素会盖在普通元素之上，都发生定位的两个元素，后写的元素会盖在先写的元素之上
• left 不能和 right 一起设置， top 和 bottom 不能一起设置
• 相对定位的元素，也能继续浮动，但不推荐这样做
• 相对行为的元素，也能通过 margin 调整位置，但不推荐这样做
• 可以使用 left 、 right 、 top 、 bottom 四个属性调整位置

注意

绝大多数情况下，相对定位，会与绝对定位配合使用，也就是父元素绝对定位子元素相对定位

3.绝对定位

代码

p {
    position: absolute
    left: -100px
}

参考位置

• 对于没有脱离文档流的元素：包含块就是父元素
• 对于脱离文档流的元素：包含块是第一个拥有定位属性的祖先元素（如果所有祖先都没定位，那包含块就是整个页面）

特点

• 脱离文档流，会对后面的兄弟元素、父元素有影响
• left 不能和 right 一起设置， top 和 bottom 不能一起设置
• 绝对定位、浮动不能同时设置，如果同时设置，浮动失效，以定位为主
• 绝对定位的元素，也能通过 margin 调整位置，但不推荐这样做
• 无论是什么元素（行内、行内块、块级）设置为绝对定位之后，都变成了定位元素

定位元素

默认宽、高都被内容所撑开，且能自由设置宽高

4.固定定位

代码

p {
    position: fixed
    left: -100px
}

参考位置

参考它的视口

什么是视口？对于 PC 浏览器来说，视口就是我们看网页的那扇“窗户”

特点

• 脱离文档流，会对后面的兄弟元素、父元素有影响
• left 不能和 right 一起设置， top 和 bottom 不能一起设置
• 固定定位和浮动不能同时设置，如果同时设置，浮动失效，以固定定位为主
• 固定定位的元素，也能通过 margin 调整位置，但不推荐这样做
• 无论是什么元素（行内、行内块、块级）设置为固定定位之后，都变成了定位元素

5.粘性定位

代码

p {
    position: sticky
    top: -100px
}

参考位置

离它最近的一个拥有“滚动机制”的祖先元素，即便这个祖先不是最近的真实可滚动祖先

特点

• 不会脱离文档流，它是一种专门用于窗口滚动时的新的定位方式
• 最常用的值是 top 值
• 粘性定位和浮动可以同时设置，但不推荐这样做
• 粘性定位的元素，也能通过 margin 调整位置，但不推荐这样做

6.定位层级

• 定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的
• 如果位置发生重叠，默认情况是：后面的元素，会显示在前面元素之上
• 可以通过 css 属性 z-index 调整元素的显示层级
• z-index 的属性值是数字，没有单位，值越大显示层级越高
• 只有定位的元素设置 z-index 才有效
• 如果 z-index 值大的元素，依然没有覆盖掉 z-index 值小的元素，那么请检查其包含块的层级

7.定位的特殊应用

让定位元素的宽充满包含块

• 块宽想与包含块一致，可以给定位元素同时设置 left 和 right 为 0
• 高度想与包含块一致， top 和 bottom 设置为 0

让定位元素在包含块中居中

/*方案一*/
left:0;
right:0;
top:0;
bottom:0;
margin:auto;

/*方案二*/
left: 50%;
top: 50%;
margin-left: 负的宽度一半;
margin-top: 负的高度一半;

注意

该定位的元素必须设置宽高