当前位置:Gxlcms > html代码 > position的相对位置和绝对位置_html/css_WEB-ITnose

position的相对位置和绝对位置_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:56人阅读

父容器relative时,子容器设置为absolute。

为什么子容器设置为absolute,父容器要设置为relative???

父元素和子元素都用Relative不行吗???

使用position 和 使用float和margin有什么优缺点???


回复讨论(解决方案)

父容器设置为relative 子容器才会已父容器为基准来定位, relative只是相对于原来的位置进行偏移。

relative
absolute

float
margin

分别实现什么的?
写出来你的问题就破了

为什么子容器设置为absolute,父容器要设置为relative?
这个说法不严密
子容器设置为 absolute 时,父容器可以是 relative 也可以是 absolute

absolute 是父容器内的绝对定位
relative 是相对文档流默认位置的相对定位

        Document有三种布局:1. 行布局(默认布局方式);2. 列布局(使用float);3. 定位布局(使用position)在定位布局中,需要搞清楚两个问题:1. 目标;2. 参照物。当使用绝对定位时,必须指定参照物,然后进行定位;而成为参照物的条件是:1. 是目标元素的父元素或祖先元素;2. position属性的值不能为static(默认值)。成为参照物的元素,其position属性值可以是 absolute、relative、fixed;其中relative是最常见的,因为将元素的position属性设置为relative,不会使该元素从标准的文档流脱离出来(也就是没什么影响)。
X

四楼的解释很到位,还有演示效果。
简单的说postion属性是需要有参照物的,absolute是绝对定位,它自身会脱离文档流,不占用宽度和高度。一般绝对定位是需要定宽高的,不然内容不会显示。
而相对定位是需要占用宽高的。

        Document有三种布局:1. 行布局(默认布局方式);2. 列布局(使用float);3. 定位布局(使用position)在定位布局中,需要搞清楚两个问题:1. 目标;2. 参照物。当使用绝对定位时,必须指定参照物,然后进行定位;而成为参照物的条件是:1. 是目标元素的父元素或祖先元素;2. position属性的值不能为static(默认值)。成为参照物的元素,其position属性值可以是 absolute、relative、fixed;其中relative是最常见的,因为将元素的position属性设置为relative,不会使该元素从标准的文档流脱离出来(也就是没什么影响)。
X




很到位,可以参考下

        Document有三种布局:1. 行布局(默认布局方式);2. 列布局(使用float);3. 定位布局(使用position)在定位布局中,需要搞清楚两个问题:1. 目标;2. 参照物。当使用绝对定位时,必须指定参照物,然后进行定位;而成为参照物的条件是:1. 是目标元素的父元素或祖先元素;2. position属性的值不能为static(默认值)。成为参照物的元素,其position属性值可以是 absolute、relative、fixed;其中relative是最常见的,因为将元素的position属性设置为relative,不会使该元素从标准的文档流脱离出来(也就是没什么影响)。
X



谢谢,还想再请教下,如果一旦用了"absolute"使元素脱离了文档流,那么它的子元素也会脱离文档流吗???

人气教程排行