嵌套 div 和绝对位置问题

Question

我对位置设置为绝对的嵌套 DIV 感到困惑，也许有人可以指导我:)

我的目标是：1 个带有 2 个 div 的导航栏，用于点和生活，都包含文本和 1 个图标，我想绝对定位 div，以便以后可以通过 jQuery 操作它们。

我的问题是，当我在我的点和生活 div 中嵌套元素时，它们对我来说都是香蕉，重叠和顶部/右侧似乎没有任何效果，div 中的元素也不符合我的position:absolute，我尝试了各种相对、绝对、显示：块等的组合，但没有任何结果。

我编译了一个 Fiddler 来帮助可视化我的问题： Fiddler link

如果我在点/生命中更改 div 的图标似乎可以正常工作，但 h2 文本仍然给我带来问题？...

我的嵌套 div 混乱的任何想法/解决方案：D。 .

    <div class="gameWrapper">
<div class="navBar">
        <div class="points">
            <h2>points</h2>
            <div class="imageClass"><div>
        </div>

        <div class="life">
            <h2>life</h2>
            <div class="imageClass"><div>
        </div>
</div>
</div>

.gameWrapper{
    position: absolute;
    overflow:hidden;
    width:100%;
    height:100%;
    background-color: #eee;
}

.gameWrapper .navBar{
    position:relative;
    overflow: hidden;
    height:69px;
    width:100%;
    top:0;
    left:0;
    border: 1px solid #00f;
}

.gameWrapper .navBar .points,
.gameWrapper .navBar .life{
    position: absolute;
    overflow:hidden;
    top:15px;
}

.gameWrapper .navBar .points .imageClass,
.gameWrapper .navBar .life .imageClass{
    position: absolute;
    top:0;
    right:0;
    width: 30px;
    height:30px;
    background: #fff url(http://drytech.dk/wp-content/uploads/2013/03/pdf-icon.png) no-repeat 0;
}

.gameWrapper .navBar h2{
    position: absolute;
    top:0px;
}

.gameWrapper .navBar .points{
    right:140px;
    width:150px;
    height:30px;
    border: 1px solid #0f0;   
}

.gameWrapper .navBar .life{
    right:50px;
    width:80px;
    height:30px;
    border: 1px solid #f00;
}

Answer 1

我会先关闭 imageClass 元素的 div 标签。

将 h2 标签内联也会有所帮助。您可以使用display: inline; 执行此操作，也可以将它们更改为默认内联元素，例如span。

这里是fiddle

将h2 标签更改为span 标签，就像我为小提琴所做的那样，删除了一些默认样式。选择这条路线时需要考虑的事项。