Question

我有3个div元素。第一个是地图。第二个是搜索按钮，第三个是如果搜索栏中有输入则要显示的相对位置的列表。

所以我想将搜索栏和列表放在地图元素的顶部。我用z-index来做。我想象有两层，第一层包含地图，第二层包含搜索栏和列表，因此我必须将它们相对放置。

该地图没有z-index值，搜索栏和列表的z-index值是2且相同。搜索栏和列表显示在地图顶部，这里没有问题，但搜索栏位于列表下方。尽管列表具有相同的z-index值，但它们出现时并不会相对于搜索栏定位。那么，如何根据z索引位置本身相对于彼此位于同一层中的元素完成这些操作呢？还是我根本不应该使用z-index？谢谢！

这是mt html代码：

.search-container {
      position: absolute;
      left: 0;
      right: 0;
      z-index: 2;
      margin-top: 1vh;
    }

#places{
      position: absolute;
      z-index: 2;
      width: 96%;
      box-shadow: 0 3px 4px 1px rgba(0, 0, 0, 0.2);
      margin-top: 6vh;
      margin-left: 8px;
    }

 #map {
      width: 100%;
      height: 60%;
      border-radius: 0 0 10px 10px;
    }

<div #map id="map"></div>

<div id="places">
    <ion-item></ion-item>
</div>

<div class="search-container">
<ion-searchbar></ion-searchbar>
</div>

我想要的是列表应该显示在列表的正下方，并且诸如margin vs.之类的内容应该相对于搜索栏。

Answer 1

我无法理解您的所有问题，但是下面的代码可能会有所帮助：

.map {
  position: relative;
}

.action {
  position: absolute;
  top: 10px;
  width: 100%;
  text-align: center;
}

<div class="map">
  <img src="https://snazzy-maps-cdn.azureedge.net/assets/127403-no-label-bright-colors.png?v=20171101110035">
  <div class="action">
    <input type="text" name="search">
    <div class="list">
      <a href="#1">Location 1</a>
      <a href="#2">Location 1</a>
      <a href="#3">Location 1</a>
    </div>
  </div>
</div>

具有相同z-index值的元素如何相对定位？

1 个答案: