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: relative;
height: 100vh (or whatever)

到你的#mapdiv。

然后，在您的 中#searchCheckboxContainer添加一个z-index: 100 //could be anything but that worked

这会将框放置在地图上方。

Answer 2

我想你需要它看起来像这样：

在这种情况下，您需要修改以下内容：

#map {

    position: relative;

    height: calc(100vh - 86px); // The height of header on mobile and you need to add responsive media queries to handle it.

}

#map #searchCheckboxContainer{

    position: absolute;

    display: inline-table;

    white-space: nowrap;

    margin-top: 0;

    bottom: 0;

    left: 0;

    top: auto;

    transform: none;

    background: #ffffff !important;

    z-index: 2;

    width: 100%;

    padding: 15px;

}

#searchCheckbox .form-check-input{

    position: relative;

    margin-top: 0;

    margin-left: 0;

}

#map #mapid{

    height: 100%;

    width: 100%;

    position: absolute;

    background-color: yellow;

    z-index: 1;

}