Question

相对定位的元素和绝对定位的元素可以协同工作，对吧？

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

如果是这样，如果最接近且相对定位的父元素在绝对定位元素的父对象的上方和下方，则绝对定位元素相对于哪个父元素？

Answer 1

看到，如果绝对元素位于元素内部，则它将始终收听其最近的相对位置的父元素，

<div relative 1> <div relative 2> <div absolute></div> </div></div>

绝对div会听相对2的声音，没关系。

Answer 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>

Answer 3

“相对定位的元素保留在文档的常规流程中。相反，绝对定位的元素将从流程中删除；因此，其他元素的定位就好像它不存在。元素相对于其最接近的祖先（即不是静态的最接近的祖先）定位。如果不存在一个祖先，则相对于文档的包含块ICB（初始包含块）放置根元素。” -https://developer.mozilla.org/en-US/docs/Web/CSS/position

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

3 个答案: