CSS定位总结

定位

定位:手动控制元素在包含块中的精准位置

1.常规流
2.浮动:float
3.定位:position

涉及的CSS属性:position

position属性

  • 默认值:static,静态定位,可以认为是不定位
  • relative:相对定位(不会改变盒子的特征,如display)
  • absolute:绝对定位
  • fixed:固定定位
    一个元素,只要position的值不是static,认为钙元素是一个定位元素
    定位元素会脱离文档流(相对定位除外)

一个脱离了文档流的元素的特点:

1.文档流中的元素摆放时,会忽略脱离了文档流的元素
2.文档流中元素计算自动高度时,会忽略脱离了文档流的元素

相对定位 relative

不会导致元素脱离了文档流,只是让元素在原来的位置上进行偏移

可以通过四个CSS属性设置其位置【冲突时,以left和top为准】

  • left
  • right
  • top
  • bottom

盒子的偏移,不会对其他盒子差生任何的影响
相对定位的元素一般是干啥的?
答:为绝对定位的元素提供包含块的,很少去做相对偏移

绝对定位 absolute

1.宽高为auto,适应内容
2.包含块变化:找祖先中第一个定位元素,该元素的填充盒为其包含块
3.若找不到祖先元素的第一个定位元素,则包含块为整个网页(初始化包含块)

固定定位 fixed

特点和绝对定位完全一致,唯一的区别就是包含块不同
包含块不同:固定位视口(浏览器的可视窗口)、
一般广告的侧栏、导航菜单、回到顶部都是用的固定定位

浏览器的可视窗口和初始化包含块的区别

初始化包含块可以认为是html元素的宽高
视口:可以看得见的区域
初始化包含块大于视口就会出现滚动条,拉动滚动条的时候,视口的大小是不变的

定位下的居中

某个方向居中:
1.定宽(高)
2.将左右(上下)距离设置为0
3.将左右(上下)margin设置为auto
绝对定位和固定定位中,margin为auto时,会自动吸收剩余空间

多个定位元素重叠时

堆叠上下文
设置z-index,通常情况下,该值越大,越靠近用户
只有定位元素设置z-index有效
z-index可以是负数,如果是负数,则遇到常规流、浮动元素,则会被其覆盖

常规流元素,完全忽略定位元素

补充

  • 绝对定位、固定定位元素一定是块盒
  • 绝对定位、固定定位元素一定不是浮动
    同时设置 position的absoult ,float:left,此时float会被强制修改为none
  • 没有外边距合并

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×