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-background和map-filter周围添加一个div，但是我如何使其位置比其他两个div的绝对位置“更重要”？

Answer 1

您不需要职位：其中任何一项都是绝对的：

export default class ProductsType2 extends React.PureComponent {
  _onPress = () => {
    this.props.navigation.navigate('DetailScreen', this.props.product.id);
  };

  render() {
    const { product} = this.props;
    //const { navigate } = this.props.navigation; //get error w
    return (
      <Card>
          <CardItem cardBody button onPress={this._onPress}>
            <Image
              style={{height: 140, width: 140, flex: 1}}
              source={{uri: product.thumbnail}} />
          </CardItem>
        </Card>
      );
   }
}

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

Answer 2

您需要了解的第一件事是，在处理absolute，left，right，top和bottom时，
您需要知道的第二件事是，相对放置的元素应该具有宽度和高度，以便将绝对放置的元素放置在其中

请考虑阅读本文以了解此属性（relative和absolute）之间的区别是什么
https://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>

Answer 3

目前尚不清楚您所说的“更重要”是什么意思，但我想我知道您的意思。主要问题之一是以下事实：顶部地图背景和地图滤镜未放置在一起，而是独立放置，然后仅与绝对放置对齐。这会使样式变脆，并且容易发生更改错误-无论是代码更改还是视口更改等。

相反，这可能是您追求的事情：

.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，更改外部尺寸等，那么所有子项都应当然也可以重新定位（除非有其他并发症）。

我也清理了一些代码。

您的身高定义无效，因为百分比身高需要具有绝对身高的父母才能工作。相反，我将两个主要块定义为具有height: 50vh，但是您可以将其设置为所需的任何内容。
在这种情况下，也不需要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;

}

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

3 个答案: