css clear：both;不适用于position：absolute

Question

我有html设置，其中一个元素需要position: absolute;，以便未来的孩子可以绝对定位。孩子的定位似乎与position: absolute;一起工作。但由于某种原因，应该出现在标题正下方的图像显示在标题的右侧。我花了几个小时思考这个。我也尝试将position: relative;添加到div hot_spot_item作为类，但这并不富有成效。如果您移除position: absolute;上的.hot-spot-wrapper，您会发现图片正好位于标题下方，但这会影响孩子们的绝对定位。

任何帮助都是适用的。

http://jsbin.com/ocetas/1/edit

修改

@jkinz 感谢您的详细回复。如果我能弄清楚标题和地图在一起并且它们都有相同的下降，那么你的解决方案就可以了。这个问题有点复杂，仅仅是因为他们在这里做事的方式。

• HTML是基于业务人员用于创作页面的XML配置在服务器端构建的。
• 此xml配置将标题和地图视为两个独立的实体。
• 此xml配置在服务器端逐项解析，并通过freemarker模板生成，该模板为该特定项生成html。
• Ergo，标题的html与地图的html分开生成，让我的生活变得悲惨。
• 这是业务作者可以使用xml配置执行的许多操作之一。
• 因此你可以看到，如果我很难发现这是他们放置的那种xml定义并将标题和地图包装在一起，那么我可以对齐它们。
• 此外，他们可以单独控制标题和地图的水平对齐方式。

P.S。我处于“设计生产脱离综合症”的经典案例中。在最长的时间里，我认为这在软件行业是不可能的。建筑师在一个没有开发基于Web的产品的经验的商店中设计和实现了整个后端，但是他们没有让UI开发人员工作两年，然后他们带我进入UI，他们不希望我抱怨如何糟糕的方法是开发软件。无论如何，谢谢你的帮助。

Answer 1

只要你宣布了一个职位，孩子就可以绝对定位。

定位一个元素绝对会使它脱离正常的文档流（浮动不会），所以clear并不意味着任何东西，因为它正在寻找具有声明位置的最近的父级（或者如果没有则是窗口）。

在您的情况下，具有position：relative的父元素应该有效。这将允许您清除父级并具有绝对定位的子元素。

看到JSBin链接后编辑

所以看起来你正试图在地图上放置标记。我这样做有点不同，这是我的方法：http://jsfiddle.net/sZq4d/

的 HTML 的

<div class="map-wrapper">
    <p>Place a marker on the map</p>
    <div class="map">
        <img src="http://placehold.it/400x400" />
        <div id="place1" class="marker" title="A nice pop-over tooltip">
            P1
        </div>
        <div id="place2" class="marker" title="This is place 2">
            P2
        </div>
    </div>
</div>

的 CSS 的

.map-wrapper {
    border: 1px solid #aaa;
    padding: 10px;
    margin: 0 auto;
    width: 400px;
}
.map-wrapper > p {
    text-align: center;
}
.map {
    /* background can be removed, height and width should match that of your map  image*/
    background-color:#eee;
    height: 400px;
    position: relative;
    width: 400px;
}
.marker {
    /* All common marker styles go here */
    background: blue;
    color: white;
    height: 20px;
    width: 20px;
    position: absolute;
}
/* I'm using pixels here, if want a more responsive style, use percentages, that way   when the map scales, the markers stay in the appropriate place*/
#place1 {
    left: 20px;
    top: 100px;
} 
#place2 {
    bottom: 40px;
    right: 150px;
}