元素设置
position:relative
,实现相对定位 调整:left 、 right 、 top 、 bottom
相对于自己原来的位置进行定位
left
不能和 right
一起设置, top
和bottom
不能一起设置margin
调整位置,但不推荐这样做注意:绝大多数情况下,相对定位,会与绝对定位配合使用。
**原因:**绝对定位的元素(即设置了 position: absolute;
的元素)相对于其最近的一个已定位的祖先元素进行定位。如果没有已定位的祖先元素,它将相对于浏览器窗口(即 body
元素)进行定位。
通过将父元素设置为相对定位(position: relative;
),而将子元素设置为绝对定位(position: absolute;
),可以使子元素的定位基于父元素,而不是整个页面。这使得布局更具可控性和可预测性。
position: absolute
即可实现绝对定位。left 、 right 、 top 、 bottom
四个属性调整位置。参考该定位元素的包含块
left
不能和right
一起设置, top
和 bottom
不能一起设置。margin
调整位置,但不推荐这样做。定位元素:默认宽、高都被内容撑开,可以自由设置宽高
position: fixed
即可实现固定定位。left 、 right 、 top 、 bottom
四个属性调整位置。**视口 :对于 **
**PC**
浏览器来说,视口就是我们看网页的那扇“窗户”
left
不能和 right
一起设置, top
和 bottom
不能一起设置。margin
调整位置,但不推荐这样做。position:sticky
即可实现粘性定位。left 、 right 、 top 、 bottom
四个属性调整位置,不过最常用的是 top 值。离它最近的一个拥有“滚动机制”的祖先元素,即便这个祖先不是最近的真实可滚动祖先
可滚动祖先:
overflow
属性用来设置滚动机制 overflow: visible;
:内容不被剪裁,超出部分可见。overflow: hidden;
:内容被剪裁,超出部分不可见。overflow: scroll;
:内容被剪裁,显示滚动条。overflow: auto;
:根据内容是否超出自动显示滚动条。overflow: auto;
)可以在元素内容超出容器时提供滚动条,使用户能够滚动查看全部内容,与粘性定位结合使用时,可以在固定位置时仍然允许内容的查看和操作。z-index
调整元素的显示层级。z-index
的属性值是数字,没有单位,值越大显示层级越高。z-index
才有效。z-index
值大的元素,依然没有覆盖掉 z-index
值小的元素,那么请检查其包含块的层级。left
和 right
为 0 。 top
和 bottom
设置为 0 。left:0;
right:0;
top:0;
bottom:0;
margin:auto;
注意:该定位的元素必须设置宽高 原因:
margin: auto;
来实现居中,如果元素没有指定宽度和高度,那么margin
的自动计算就无法进行,从而无法正确居中。