CSS 中的粘性 div

Question

我希望将一个 div 向下推（请参阅屏幕截图中的“移动地图时进行搜索”），使其漂浮在地图上方，但是如果我使用 or 的任何常量，那么它是相对于父 div margin-top（top地图），而不是浏览器窗口。

我怎样才能这样做呢？我尝试添加到父级的网站链接，但这就是我得到的（地图被隐藏）：position: relative;#map

这是我的 CSS 代码：

#map {

    #searchCheckboxContainer {

        position: absolute;

        display: inline-table;

        white-space: nowrap;

        margin-top: 24px;  // sure, this works, but it's 24px *from the browser window*

        top: 0px;          // any way to make it relative to the parent div (map)?

        left: 50%;

        transform: translateX(-50%);

        background: rgb(255, 255, 255) !important;

    }

    #searchCheckboxContainer {

        height: 40px;

    }

}

HTML：

<div id="map" v-cloak>

      <div id="searchCheckboxContainer">

        <div id="searchCheckbox">

            <input id="checkbox" class="form-check-input" type="checkbox" value="" id="defaultCheck1">

            <label class="form-check-label" for="defaultCheck1">

              Search as I move the map

            </label>

        </div>

      </div>

      <div id="mapid"></div>

</div>

Answer 1

添加作为答案以避免评论噪音：所有#map子元素都是绝对定位的。因此，本质上它们不在正常的文档流中，并且不会影响#mapdiv 的高度。您需要添加：position:&nbsp;relative; height:&nbsp;100vh&nbsp;(or&nbsp;whatever)到你的#mapdiv。然后，在您的 中#searchCheckboxContainer添加一个z-index: 100 //could be anything but that worked这会将框放置在地图上方。

Answer 2

我想你需要它看起来像这样：在这种情况下，您需要修改以下内容：#map {&nbsp; &nbsp; position: relative;&nbsp; &nbsp; height: calc(100vh - 86px); // The height of header on mobile and you need to add responsive media queries to handle it.}#map #searchCheckboxContainer{&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; display: inline-table;&nbsp; &nbsp; white-space: nowrap;&nbsp; &nbsp; margin-top: 0;&nbsp; &nbsp; bottom: 0;&nbsp; &nbsp; left: 0;&nbsp; &nbsp; top: auto;&nbsp; &nbsp; transform: none;&nbsp; &nbsp; background: #ffffff !important;&nbsp; &nbsp; z-index: 2;&nbsp; &nbsp; width: 100%;&nbsp; &nbsp; padding: 15px;}#searchCheckbox .form-check-input{&nbsp; &nbsp; position: relative;&nbsp; &nbsp; margin-top: 0;&nbsp; &nbsp; margin-left: 0;}#map #mapid{&nbsp; &nbsp; height: 100%;&nbsp; &nbsp; width: 100%;&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; background-color: yellow;&nbsp; &nbsp; z-index: 1;}