相对定位元素和绝对定位元素答案

【问题标题】：Relatively Positioned Elements and Absolutely Positioned Elements相对定位元素和绝对定位元素
【发布时间】：2019-06-22 14:05:24
【问题描述】：

相对定位元素和绝对定位元素是相辅相成的，对吧？

绝对定位的元素是相对于最近的相对定位的父元素，如果没有相对定位的元素，默认情况下，绝对定位的元素是相对于浏览器视口的，对吧？

如果这是真的，如果最近的相对定位的父元素在绝对定位元素的父元素的上方和下方，那么绝对定位的元素将与哪一个相对？

【问题讨论】：

你能添加任何例子来简要解释一下吗？
能否请您提供代码 sn-p 以更好地理解场景？
除了回应对代码 sn-p 的请求以澄清您的问题外，您的断言也不太准确。绝对定位的元素相对于它最近的非静态定位的祖先。这不一定是一个相对定位的祖先——它可能是一个绝对的、固定的或粘性的祖先。同样在没有这样一个祖先的情况下，绝对定位的元素是相对于初始包含块，而不是视口。
@Prashant 我不知道如何在这个网站上发布 HTML 和 CSS 抱歉。我已经回答了我的问题。感谢您尝试帮助我。
@John_ny 我需要学习如何在这个网站上发布 HTML 和 CSS，所以我现在不能发布示例。我已经回答了我的问题。感谢您尝试帮助我。

标签： html css

【解决方案1】：

"相对定位的元素保留在文档的正常流中。相反，绝对定位的元素被从流中取出；因此，其他元素被定位，就好像它不存在一样。绝对定位的元素相对于它最近的定位祖先（即最近的非静态祖先）定位。如果定位的祖先不存在，它相对于 ICB（初始包含块）定位，它是文档的包含块根元素。” - https://developer.mozilla.org/en-US/docs/Web/CSS/position

【讨论】：

【解决方案2】：

父元素总是在上面的定义。每个元素只有一个最接近的父元素：<parent><child/><child/></parent>。

main {
  display: flex;
  flex-flow: row wrap;
  background-color: #00BCD4;
  padding-bottom: 3rem;
}

section {
  box-shadow: 0 0 20px black;
  min-height: 200px;
  flex: 1 0 200px;
  box-shadow: inset 0 0 20px 0px #ccc;
  background-color: #eee;
  border: 1px solid #aaa;
  margin: 3rem;
}

section > div {
  background-color: #E91E63;
  width: 40px;
  height: 40px;
}

h3 {
  color: #FFF;
  margin: 1rem 3rem 1.5rem 1rem;
  font-family: sans-serif;
  font-size: 2.5rem;
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.tr {
  top: 0;
  right: 0;
}

.br {
  bottom: 0;
  right: 0;
}

.bl {
  bottom: 0;
  left: 0;
}

<main class="relative">

  <h3 class="absolute br">Child of main</h3>

  <section class="relative">
    <div class="absolute"> </div>
    <div class="absolute tr"> </div>
    <div class="absolute br"> </div>
    <div class="absolute bl"> </div>
  </section>

  <section class="relative">
    <div class="absolute"></div>
    <div class="absolute tr"> </div>
    <div class="absolute br"> </div>
    <div class="absolute bl"> </div>
  </section>

</main>

【讨论】：