导语
:
CSS 元素定位,是目前 CSS
页面布局
的一种主要方式。
文章目录
- 相对定位
-
- 开启相对定位
- 相对定位的参考点
- 相对定位的特点
- 绝对定位
-
- 开启绝对定位
- 绝对定位的参考点
- 绝对定位的特点
- 固定定位
-
- 开启固定定位
- 固定定位的参考点
- 固定位的特点
- 粘性定位
-
- 开启粘性定位
- 粘性定位的参考点
- 粘性定位的特点
- 定位元素的层级
- 定位的特殊应用场景
相对定位
开启相对定位
- 给元素设置
position:relative
即可实现相对定位
。 - 可以使用
left 、 right 、 top 、 bottom
四个属性调整位置。
相对定位的参考点
相对与自己开启
定位前的原始位置
,进行定位位置改变
相对定位的特点
-
不会脱离文档流
,元素位置的变化,只是视觉效果上的变化,不会对其他元素产生任何影响。 -
定位元素的显示
层级比普通元素高
,无论什么定位,显示层级都是一样的。默认规则是:
定位的元素会盖在普通元素之上
- 都发生定位的两个元素,
后开启定位的元素会盖在先开启定位
的元素之上。
- left 不能和 right 一起设置, top 和 bottom 不能一起设置。
-
相对定位的元素,也能继续
开启浮动
,但不推荐
这样做。 -
相对行为的元素,也能通过
margin
调整位置,但不推荐
这样做。
绝对定位
开启绝对定位
- 给元素设置
position: absolute
即可实现绝对定位
。 - 可以使用
left 、 right 、 top 、 bottom
四个属性调整位置。
绝对定位的参考点
-
参考它的
包含块
绝对定位的特点
-
脱离文档流
,会对后面的兄弟元素、父元素有影响
。 -
left
不能和right
一起设置,top
和bottom
不能一起设置(特殊场景除外
)。 -
绝对定位、浮动
不能同时设置
,如果同时设置,浮动失效,以定位为主。 -
绝对定位的元素,也能通过 margin 调整位置,但
不推荐
这样做。 -
无论是什么元素(行内、行内块、块级)设置为
绝对定位
之后,都变成了定位元素
。
固定定位
开启固定定位
- 给元素设置
position: fixed
即可实现固定定位
。 - 可以使用
left 、 right 、 top 、 bottom
四个属性调整位置。
固定定位的参考点
- 参考它当前的浏览器
视口
固定位的特点
-
脱离文档流
,会对后面的兄弟元素、父元素有影响
。 -
left
不能和right
一起设置,top
和bottom
不能一起设置。 - 固定定位和浮动
不能
同时设置,如果同时设置,浮动失效,以固定定位为主。 - 固定定位的元素,也能通过 margin 调整位置服务器托管网,但
不推荐
这样做。 - 无论是什么元素(行内、行内块、块级)设置为固定定位之后,都变成了
定位元素
。
粘性定位
开启粘性定位
- 给元素设置
position:sticky
即可实现粘性定位。 - 可以使用
left 、 right 、 top 、 bottom
四个属性调整位置,不过最常用
的是top
值。
粘性定位的参考点服务器托管网
离它最近的一个拥有 “
滚动机制
” 的祖先元素,即便这个祖先不是最近的真实可滚动祖先
粘性定位的特点
-
不会脱离文档流
,它是一种专门用于窗口滚动时的新的定位方式。 - 最常用的值是
top
值。 -
粘性定位和浮动可以同时设置,但
不推荐
这样做。 - 粘性定位的元素,也能通过
margin
调整位置,但不推荐
这样做。
定位元素的层级
- 定位元素的
显示层级比普通元素高
,无论什么定位,显示层级默认都是一样的
。- 如果位置发生重叠,默认情况是:后面的元素,会显示覆盖在前面元素之上。
- 可以通过
css
属性z-index
调整元素的显示层级。z-index
的属性值是数字
,没有单位,值越大显示层级越高。- 只有定位的元素设置
z-index
才有效。- 如果
z-index
值大的元素,依然没有覆盖掉z-index
值小的元素,那么请检查其包含块的层级,可能是父级元素的整体层级低了。
定位的特殊应用场景
场景一:让定位元素的宽铺满 包含块(父元素)
实现:前提是定位元素没有设置固定宽高度
- 块宽度想与包含块一致,可以给定位元素
同时设置 left,right
为0
。 - 高度想与包含块一致,
同时设置 top, bottom
为0
。
释
:向四周拉伸
,铺满包含块
div {
position: absolute;
/* position: fixed; */
top: 0;
left: 0;
right: 0;
bottom: 0;
}
场景二:让定位元素在包含块中居中
;
前提:
实现:
position: absolute;
/* position: fixed; */
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
♂️ 博主座右铭:向阳而生,我还在路上!
——————————————————————————————
博主想说:将持续性为社区输出自己的资源,同时也见证自己的进步!
——————————————————————————————
♂️ 如果都看到这了,博主希望留下你的足迹!【收藏!点赞!✍️评论!】
——————————————————————————————
服务器托管,北京服务器托管,服务器租用 http://www.fwqtg.net