Question

我有一个div，其中有一张桌子，上面有谷歌地图。

我想在地图外部的Google地图中放置一个信息框，只悬浮在顶部

但我似乎无法做到正确，信息div只是在谷歌地图上推进，尽管它位于地图之上......

CSS

.google_map {
    height: 270px;
    width: 100%;
 }

    #flightMapInfo {
        position: relative;
        float: left;
        z-index: 100;
        color: #FFFFFF;
        top: 30px;
        left: 50px;
        background:#5a85a5;
        padding: 5px;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
    }


div.tabContent {
    border: 1px solid #c9c3ba;
    padding: 0.5em;
    background-color: #f1f0ee;
    min-height: 300px;
}


.tableLeft {
    width: 75%;
    float: left;
    border-right: dotted 2px black;
}

HTML

    <div class="mapBlock tabContent">
        <div id="flightMapInfo">WHARGL</div>
        <table class="tableLeft">
            <tr><td><div id="flightMap" class="google_map"></div>
               </table></td></tr></div>

Answer 1

我想对@ scunliffe的答案发表评论，但这相当冗长。

Float对浏览器说，div应该是左侧或右侧而不是正常行为，其余内容应该流动（想想：* .doc中的图像）。

你的问题是，你混淆了英语'浮动'[保持悬浮在流体表面内或表面而不会下沉]与css''浮动'[保持“左”或“右”边界并流动其他网站内容]

你想要做的是将div从正常的网页流中取出（因此：position:absolute）定位它。

提示： absolute相对于0; 0是首先找到的祖先，relative或absolute。 Relative相对于0; 0表示正常流程中的位置。

相对div *就好像它们在原来的位置上一样，它们只是被渲染了。绝对div *取自网站的流量和相应的位置以上提示。

- by div，我的意思是任何风格的标签

如果您知道这一切并且无法使其发挥作用，我道歉。

修改在position:absolute;中，这意味着首先找到祖先：

<body> <div id="wrapper"> <div id="innerWrapper"> <div id="content">

和两个CSS个案例：

1

#content { position: absolute; top: 10px; left: 20px; }

2

#innerWrapper { positon: absolute; top: 200px; left: 200px; } #content { position: absolute; top: 10px; left: 20px; }

在第一种情况下，由于地狱#wrapper和#innerWrapper已设置位置，树中的第一个absolute或relative祖先是正文，因此定位为10px; 20px从0;身体的0（读：视口） - #content在10;窗口20。

在第二种情况下，＃innerWrapper设置为absolute，从而使200; 200 window 成为一个点，其被理解为0;当定位#content时为0。因此（找到绝对祖先），content将位于210; 220窗口

示例：http://jsfiddle.net/3dq6V/

Answer 2

我认为您正在寻找position:absolute;而不是float:xxx。

Float只表示它将与屏幕上的其他元素“流动”...你希望它漂浮在其他内容之上而不受其约束，因此你需要绝对定位。

为什么我的浮动div推动其他div？

2 个答案: