无法混合绝对和相对位置

问题描述 投票:0回答:3

我想知道我应该如何组织事情。我希望我的屏幕像这样组织起来,并做出回应:enter image description here

所以这就是我所做的:

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

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

似乎在地图背景和地图过滤器周围添加div应该是解决方案,但是如何使其位置“比其他两个div的绝对位置更重要”?

html css
3个回答
2
投票

目前尚不清楚“更重要”是什么意思,但我想我知道你的意思。其中一个主要问题是顶部地图背景和地图过滤器不是一起定位而是独立定位,然后与绝对定位对齐。这使得样式变得脆弱并且容易因更改而出错 - 无论是代码更改还是视口更改等。

相反,这可能是你追求的事情:

.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: absoluteposition: relative.[1]定位相对于最近祖先的元素。

这意味着顶部有效地“分组”,如果容器被重新定位,无论是新的CSS规则,DOM的更改,外部维度的更改等,那么所有的孩子也应该自然地重新定位为好(除了任何其他并发症)。

我也有点清理过代码。

  1. 您的高度定义无效,因为百分比高度需要具有绝对高度的父级才能工作。相反,我已经将两个主要块定义为具有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;

}

1
投票

你不需要职位:绝对任何这些:

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

.container-map {
  width: 400px; /*set as much as you like */
}

.map-background , .map-search-results {
  display: block;
  height: 50%;
}

.map-background {
  padding: 15px; /* set as much as you want - to affect the height/position of .map-filter */
}

.map-filter {
  width: 200px;
  height: 100%; /* top/bottom padding of [.map-background] will create the height differential here */
}

1
投票

你需要知道的第一件事是在处理absolute时,最好使用leftrighttopbottom, 您需要知道的第二件事是相对定位的元素应该具有宽度和高度,以便将绝对定位的项放置在其中

考虑阅读这篇文章,了解这些属性之间的区别(relativeabsolutehttps://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

我试着像你问题中的图像一样做一个例子:

.container-map {
  position: relative;
  background:#000;
  width:100vw;
  height:100vh;
}
.map-background {
  z-index: 10;
  width: 100%;
  height: 50%;
  position: absolute;
  top: 0;
  left: 0;
  background:#ff0000;
}
.map-filter {
  z-index: 100;
  left: 5%;
  top: 5%;
  width:130px;
  height:40%;
  background:orange;
  position: absolute;
}
.map-search-results{
    position: absolute;
    top: 50%;
    width: 100%;
    height:50%;
    background:#00ff00;

}
<div class="container-map">
    <div class="map-background"></div>
    <div class="map-filter"></div>
    <div class="map-search-results"></div>
</div>
© www.soinside.com 2019 - 2024. All rights reserved.