小 div 漂浮在大 div 内答案

【问题标题】：Small div floating inside of a larger div小 div 漂浮在大 div 内
【发布时间】：2014-05-20 14:08:12
【问题描述】：

我有一个占据屏幕宽度和高度 100% 的谷歌地图。好吧，高度设置为 1000 像素，因为我无法让它达到 100%，但这是另一个问题。无论如何，我想让#map div 占据整个屏幕并在屏幕右侧显示一个矩形框 - 这是一个将类设置为“search_box”的 div。

我的应用程序中的 html 和 css 有两个问题：

矩形框确实如我所愿显示在页面右侧，但它显示在谷歌地图下，所以你看不到它！我只能确认这一点，因为如果我刷新页面，它确实会在谷歌地图覆盖它之前出现一瞬间。 :(
我希望该框比其上方的菜单低约 50 像素，但 padding-top 似乎没有任何作用。我不确定这是不是因为它是浮动的。有什么想法吗？

另外，'search_box' div 是否应该在 'map' div 内？

在我的 HTML 中

<div id="map"></div>
<div class="search_box"></div>

在我的 CSS 中

.search_box {
  background-color: white;
  float: right;
}

#map {
  width: 100%;
  height: 1000px;
  padding: 0 auto;
  margin: 0px;
  overflow: hidden;
}

【问题讨论】：

添加小提琴并更新您的代码
@RJeyashri：这是小提琴，jsfiddle.net/3bV3M，现在请告诉我答案。
要让谷歌地图的高度为 100%，您必须将所有祖先的高度设置为 100%：jsfiddle.net/3bV3M/1
另外，不要使用花车——它们是邪恶的。
jsfiddle.net/jeyashri_shri/R6eZF/4

标签： html css

【解决方案1】：

如果您希望搜索框浮动在地图旁边，您还需要浮动#map。如果您想要地图内的搜索框，您应该将它们都包装在一个包含的 div 中并绝对定位搜索框。

【讨论】：

【解决方案2】：

要将搜索框定位在地图的右侧，请将两个divs 包裹在另一个div 中。

<div class="map-wrapper">
    <div id="map"></div>
    <div class="search_box"></div>
</div>

现在使用 absolute position 作为搜索 div 将其定位在地图的右侧。

DEMO

CSS

.map-wrapper{
    position:relative;
}
.search_box {
  background-color: blue;
  width:100px;
  height:200px;
    position:absolute;
    top:10px;
    right:10px;
}

#map {
  width: 100%;
  height: 1000px;
  padding: 0 auto;
  margin: 0px;
  background-color:#ccc;
}

【讨论】：

【解决方案3】：

我无法想象你为什么想要/关心将一个元素放在另一个完全覆盖它的元素下方，但是：http://jsfiddle.net/3bV3M/5/

重新排序你的 DOM：

div.search-box
div#map

#map 应该有 position:absolute 以使其脱离正常的文档流，但仍允许其位置受到控制。我将 .search-box 留在了 #map 的顶部，以便您可以看到它的位置；要将其移到后面，请删除 z-index: 1;。请注意，我在小提琴上启用了css normalisation。

html, body {
    display:      block;
    height:       100%;
    position:     relative;
    width:        100%;
}
.search_box {
    background:   red;
    height:       1.2rem;
    margin-left:  auto;
    margin-right: 0;
    position:     relative;
    top:          50px;
    /* use `top` instead of `margin-top`, it doesnt contribute to the box */
    width:        5rem;
    z-index:      1; /* remove me */
}
#map {
    background:   black;
    height:       100%;
    position:     absolute;
    top:          0;
    width:        100%;
}

【讨论】：