html - 无法混合绝对和相对位置

Question

我想知道我应该如何组织事情。我希望我的屏幕像这样组织，并且能够响应:

这就是我所做的:

.container-map {
  position: relative;
}
.map-background {
  z-index: 10;
  width: 100%;
  height: 50%;
  position: absolute;
  top: 0;
  left: 0;
}
.map-filter {
  z-index: 100;
  margin-left: 10%;
  margin-top: 5%;
  position: absolute;
}
.map-search-results{
    position: absolute;
    margin-top: 50%;
    width: 100%;
}

<div class="container-map">
    <div class="map-background"></div>
    <div class="map-filter"></div>
    <div class="map-search-results"></div>
</div>

它适用于 map 和过滤器，但对于搜索结果部分，这对我来说似乎很脏。

似乎在 map-background 和 map-filter 周围添加一个 div 应该是解决方案，但如何使其位置比其他两个 div 的绝对位置“更重要”？

Answer 1

不清楚您所说的“更重要”是什么意思，但我想我知道您的意思。主要问题之一是顶部 map 背景和 map 过滤器不是一起定位而是独立定位，然后仅与绝对定位对齐。这使得样式变得脆弱并且容易因更改而出错 - 无论是代码更改还是视口(viewport)更改等。

相反，这可能是您想要的东西:

.top-container{
   height:50vh;
   position:relative;
}

.map-background {
  height: 100%;
  background-color:yellow;
  outline:2px solid yellow;
}
.map-filter {
  position: absolute;
  top:15%;
  left:10%;
  min-height:50px;
  min-width:200px;
  background-color:lightblue;
  outline:2px solid lightblue;
}
.map-search-results{
    height:50vh;
    background-color:red;
    outline:2px solid red;
}

<div class="container-map">
      <div class="top-container">
        <div class="map-background">
            Background
        </div>
        <div class="map-filter">
           Filter
        </div>
      </div>
      <div class="map-search-results">
        Search Results
      </div>
  </div>

现在顶部部分保存在它自己的容器中，只有过滤器是绝对定位的，但那是绝对相对于包装容器的。请记住，position: absolute 将相对于具有position: absolute 或position: relative 的最近祖先定位元素。 ^[1]

这意味着顶部部分实际上是“分组”的，如果重新定位容器，无论是使用新的 CSS 规则、DOM 更改、外部尺寸更改等，那么所有子项也应该是自然重新定位(除非有任何其他并发症)。

我也稍微清理了代码。

1. 您的高度定义无效，因为百分比高度需要具有绝对高度的父项才能起作用。相反，我将两个主要 block 定义为具有 height: 50vh，但您可以将其设置为您需要的任何值。

2. 在这种情况下也不需要 z-index(绝对定位的 z-index 容易造成混淆)。 map-filter 是唯一“位于”其他内容之上的东西，并且它无论如何都会出现在顶部，因为它是绝对定位的，而 map-background 不是。

所以如果你拿出我为演示创建的代码，这就是核心 CSS:

.top-container{
   height:50vh;
   position:relative;
}

.map-background {
  height: 100%;
}
.map-filter {
  position: absolute;
  top:15%;
  left:10%;
}
.map-search-results{
    height:50vh;

}