html – CSS中绝对和相对定位之间是否存在父子关系?

html – CSS中绝对和相对定位之间是否存在父子关系?,第1张

概述我是编码世界和CSS的新手.阅读了关于相对和绝对定位的一些文章,我的理解如下.不过,我不确定一个绝对的位置应该是父母相对位置的孩子,反之亦然. >有4个位置属性,即静态,相对,绝对和固定. >如果元素具有相对位置,它仍然是文档正常流程的一部分.然而,它具有由顶部,右侧,底部和左侧的属性抵消的能力. >它也可以被赋予一个z-index值,并被自动定位在静态元素之上 >它还提供了一种包含作为其代码块的 我是编码世界和CSS的新手.阅读了关于相对和绝对定位的一些文章,我的理解如下.不过,我不确定一个绝对的位置应该是父母相对位置的孩子,反之亦然.

>有4个位置属性,即静态,相对,绝对和固定.
>如果元素具有相对位置,它仍然是文档正常流程的一部分.然而,它具有由顶部,右侧,底部和左侧的属性抵消的能力.
>它也可以被赋予一个z-index值,并被自动定位在静态元素之上
>它还提供了一种包含作为其代码块的一部分的子元素的方法,尽管我不确定这是什么意思.

基于这些信息,这是否意味着具有绝对位置的元素应该是具有相对位置的元素的子元素,反之亦然,或者没有关系?

如果没关系,你什么时候让他们依赖彼此,例如亲子关系?

解决方法 没有真正的亲子关系.

相对定位与绝对定位无关.相对定位与普通静态定位相同,除了可以将顶部/右侧/底部/左侧偏移. “顶/右/底/左”值相对于流中通常存在的元素的任何位置.如果您省略这些值,元素仍然相对定位,但它的位置与静态位置完全相同.

OTOH,当您使用绝对定位时,绝对定位的元素的“父”元素会很重要.

这是因为LaC的答案解释.通过绝对定位,“顶/右/底/左”值相对于绝对,相对或固定定位的最近父元素的任何值.我会称之为“参考元素”.

考虑这个例子片段:

<body>  <div >    <p >P</p>  </div></body>

div将被左对齐,静态(正常,在文档流)的位置,身体宽度的50%. p将是一个20像素宽的框,在视口的右上角:

-------------|     |   |P||     |   --|| div |     ||     |     ||     |     |-------------

视口是参考元素,因为没有p的其他父元素具有绝对/固定/相对定位.

现在将div更改为相对定位:

<body>  <div >    <p >P</p>  </div></body>

由于没有指定顶部/右侧/底部/左侧的偏移量,所以div将显示与以前完全相同.然而,p的位置会改变,尽管它的风格没有.

那是因为在之前,p与视口的右上角对齐,但是现在有一个更靠近父元素(div),其绝对/固定/相对定位.所以现在,div成为参考元素,p将与右上角对齐:

-------------|   |P|     ||   --|     || div |     ||     |     ||     |     |-------------

所以,只要知道每当你使用绝对定位,你必须考虑文档中的参考元素将是什么.而且,您可以设计样式表,以便您选择这个参考元素,这使绝对定位成为非常有用的布局技术.

总结

以上是内存溢出为你收集整理的html – CSS中绝对和相对定位之间是否存在父子关系?全部内容,希望文章能够帮你解决html – CSS中绝对和相对定位之间是否存在父子关系?所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/web/1100616.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-28
下一篇 2022-05-28

发表评论

登录后才能评论

评论列表(0条)

保存