我希望将一个 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>
2 回答
凤凰求蛊
TA贡献1825条经验 获得超4个赞
添加作为答案以避免评论噪音：
所有#map子元素都是绝对定位的。因此，本质上它们不在正常的文档流中，并且不会影响#mapdiv 的高度。
您需要添加：
position: relative; height: 100vh (or whatever)
到你的#mapdiv。
然后，在您的 中#searchCheckboxContainer添加一个z-index: 100 //could be anything but that worked
这会将框放置在地图上方。
慕容708150
TA贡献1831条经验 获得超4个赞
我想你需要它看起来像这样：
在这种情况下，您需要修改以下内容：
#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;
}
- 2 回答
- 0 关注
- 55 浏览
添加回答
举报
0/150
提交
取消