3

我有 html 设置，其中一个元素需要具有position: absolute;，以便将来的孩子可以绝对定位。孩子的定位似乎与文件一起工作position: absolute;但由于某种原因，应该出现在标题正下方的图像出现在标题的右侧。我花了几个小时思考这个问题。我也尝试position: relative;使用 as 类添加到 divhot_spot_item中，但这并不富有成效。如果您删除position: absolute;on，.hot-spot-wrapper您会注意到图像在标题下方对齐，但这与孩子的绝对定位相混淆。

任何帮助都会受到重视。

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

编辑

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

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

PS我是“设计生产脱离综合症”的经典案例。在很长一段时间里，我认为这在软件行业是不可能的。架构师在一家没有开发基于 Web 的产品的经验的商店中设计并实施了整个后端，两年内没有一名 UI 开发人员，然后他们带我来做 UI，他们不希望我抱怨如何糟糕的一种方法是开发软件。无论如何感谢您的帮助。

4

1 回答 1

4

只要你声明了一个位置，孩子们就可以绝对定位。

定位一个元素绝对会使其脱离正常的文档流（浮动不会），所以 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;
}
于 2013-06-28T21:33:58.800 回答