>有4个位置属性,即静态,相对,绝对和固定.
>如果元素具有相对位置,它仍然是文档正常流程的一部分.然而,它具有由顶部,右侧,底部和左侧的属性抵消的能力.
>它也可以被赋予一个z-index值,并被自动定位在静态元素之上
>它还提供了一种包含作为其代码块的一部分的子元素的方法,尽管我不确定这是什么意思.
基于这些信息,这是否意味着具有绝对位置的元素应该是具有相对位置的元素的子元素,反之亦然,或者没有关系？
如果没关系,你什么时候让他们依赖彼此,例如亲子关系？
解决方法
相对定位与绝对定位无关.相对定位与普通静态定位相同,除了可以将顶部/右侧/底部/左侧偏移. “顶/右/底/左”值相对于流中通常存在的元素的任何位置.如果您省略这些值,元素仍然相对定位,但它的位置与静态位置完全相同.
OTOH,当您使用绝对定位时,绝对定位的元素的“父”元素会很重要.
这是因为LaC的答案解释.通过绝对定位,“顶/右/底/左”值相对于绝对,相对或固定定位的最近父元素的任何值.我会称之为“参考元素”.
考虑这个例子片段：
<body>
<div style="width: 50%;">
<p style="position: absolute; width: 20px; top: 0; right: 0">P</p>
</div>
</body>
div将被左对齐,静态(正常,在文档流)的位置,身体宽度的50％. p将是一个20像素宽的框,在视口的右上角：
------------- | | |P| | | --| | div | | | | | | | | -------------
视口是参考元素,因为没有p的其他父元素具有绝对/固定/相对定位.
现在将div更改为相对定位：
<body>
<div style="position: relative; width: 50%;">
<p style="position: absolute; width: 20px; top: 0; right: 0">P</p>
</div>
</body>
由于没有指定顶部/右侧/底部/左侧的偏移量,所以div将显示与以前完全相同.然而,p的位置会改变,尽管它的风格没有.
那是因为在之前,p与视口的右上角对齐,但是现在有一个更靠近父元素(div),其绝对/固定/相对定位.所以现在,div成为参考元素,p将与右上角对齐：
------------- | |P| | | --| | | div | | | | | | | | -------------
所以,只要知道每当你使用绝对定位,你必须考虑文档中的参考元素将是什么.而且,您可以设计样式表,以便您选择这个参考元素,这使绝对定位成为非常有用的布局技术.
