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标记，就像我为小提琴一样，删除了一些默认样式。如果你选择那条路线，可以考虑一些事情。

嵌套的div和绝对位置问题

1 个答案: