Question

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

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

矩形框确实显示在我想要的页面右侧，但它显示在谷歌地图下，所以你看不到它！我只能确认这一点，因为如果我刷新页面，它会在谷歌地图覆盖它之前显示一瞬间。：（
我希望这个盒子比它上面的菜单低约50px，但是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;
}

Answer 1

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

Answer 2

要将搜索框放在地图的右侧，请将div包裹在另一个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;
}

Answer 3

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

重新订购您的DOM：

div.search-box
div#map

#map应该具有position：absolute来将其从正常的文档流中取出，但仍允许其位置被控制。我在#map上面留下了.search-box，这样你就可以看到它的位置;将其移到后面，删除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%;
}

小div漂浮在一个更大的div内

3 个答案: