css中的几种定位详解

css 专栏收录该内容
3 篇文章 0 订阅

上课老师讲的几种关于css的定位,讲得很详细,整理了文档,老是翻文档觉得很不方便,所以想以后养成写博客的习惯,记录一些觉得总结得很好的东西。

相对定位不会脱离文档流

绝对定位/固定定位会脱离文档流


1.1 文档流

文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列。并最终窗体自上而下分成一行行,并在每行中按从左到右的顺序排放元素。

1.2 脱离文档流

脱离文档流即是元素打乱了这个排列,或是从排版中拿走。

让元素脱离文档流的方法有:浮动和定位。

1.3 默认定位(static)

static:默认值。即没有定位,元素在正常的流中,top,right,bottom,left 和 z‐index 属性无效。

例如:

1.4 相对定位(relative)

relative:生成相对定位的元素,通过 top,bottom,left,right 的位置相对于其正常位置进行定位。其中的相对指的是相对于元素在默认流中的位置。

示例:

总结:

  1. 将元素 position 属性设置为 relative 之后,再通过 top,bottom,left,right 属性对其进行相对于原来位置的偏移;
  2. 元素偏移之后,他本来在默认文档流中占据的位置仍然存在,其紧挨其后的元素的定位依据它本来的位置定位;
  3. 该元素偏移之后,可能存在覆盖其他元素的情况(可以使用 z-index属性显示层级有限级别)。

1.5 绝对定位(absolute)

absolute:生成绝对定位的元素,不再以自己原来的位置定位,而是以网页的左上角(body)为原定定位。

然而,如果 box2 的父元素当中,有任何一个元素有默认值之外的定位属性,那么 box2的定位将以所有自己的祖先元素中,离自己最近的一个除 static 定位以外的元素的左上角为原点进行定位。

总结:

  1. 绝对定位的元素已经脱离了文档流,普通流中其他元素的布局就像绝对元素不存在一样;
  2. 绝对定位的元素的位置是相对于最近的已定位的祖先元素,如果元素没有已定位的祖先元素,它的位置就相对于 body;
  3. 绝对定位的框可以覆盖页面的其他元素。

1.6 固定定位(fixed)

fixed:本质上是一种绝对定位,不为元素预留空间。通过指定相对于屏幕视窗的位置来指定元素的空间,且元素的位置在屏幕滚动时不会发生变化。应用于很多网站顶端的固定导航、右下角的固定广告等等。

1.7 常见问题总结

1. absolute, relative, fixed 偏移的参考点分别是什么?

absolute 偏移的参考点是:相对于最近的已定位的父元素,如果没有,则相对于 body 元素;

relative偏移的参考点是:相对于元素在普通流中的原来位置;

fixed偏移的参考点是:相对于浏览器窗口。

2. z-index有什么作用? 如何使用?

z‐index 属性用于设置节点的堆叠顺序,拥有更高堆叠顺序的节点将显示在堆叠顺序较低的节点前面。

注意:

z-index 仅对定位元素有效(position:relative||absolute||fixed);

z-index 只可比较同级元素

3. position:relative 和负 margin 都可以使元素位置发生偏移,二者有什么区别?

二者的区别表现在:

相对定位后元素位置发生偏移,它仍会坚守原来占据的空间,不会让文档流的其他元素流入。

负margin会使元素在文档流中的位置发生偏移,它会放弃偏移之前占据的空间,紧挨其后的元素会填充这部分空间;

4. 如何让一个固定宽高的元素在页面上垂直水平居中?

可以使用绝对定位和负 margin。

实例:

注意:元素的垂直居中有多种做法,每种做法都有许多限制条件,没有一种方法可以在任何时候适用。

例如这种方法就只适合元素对于整个网页居中的时候,而无法相对于某个元素居中。

5. 文档流、定位和父子元素高度之间的关系?

对于正常 static 定位,如果不对父元素设置高度,那么父元素的高度应该是所有自元素的高度之和。

如果使用相对定位,那么元素不会脱离文档流,父元素的高度还是其所有元素高度之和,但是相对定位的元素,可能超过父元素的范围。

如果使用绝对定位,那么元素会脱离文档流,父元素在计算高度的时候,会好像绝对定位的子元素不存在一样。

对于固定定位的情况,结果和绝对定位一致

6. 定位和父子元素宽度之间的关系?

对于 div 元素来说,它是块级元素,如果我们不设置其宽度,那么其宽度将和其父容器宽度一致

当设置 box2 为相对定位之后,其不影响 box2 的宽度。

当设置 box2 为绝对定位时,box2 的宽度将由其内容决定。

如果当父元素设置为绝对定位之后,其宽度将由其中最大的元素的宽度决定。

如果相互嵌套的几层父子元素都设置绝对定位,那么里层的元素会脱离文档流,从而无法支撑起外层元素的宽度。

如果内存元素当中还有其他元素,包含了 box1,box2 和 box3,那么其宽度将受到 inner 元素的限制,即无论它的内容多长,其宽度总是受到 inner 元素宽度的限制。

然而,new 元素的内容是一个不可分割的文本,那么它就可以撑开整个元素的宽度。

 

参与评论
请先登录 后发表评论~
©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页

打赏作者

just_wq

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值