我希望將一個 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 關注
- 131 瀏覽
添加回答
舉報
0/150
提交
取消