Проблема с вложенными div и абсолютной позицией

Меня озадачивают вложенные DIV с абсолютной позицией, возможно, кто-то может мне помочь :)

Моя цель: 1 навигационная панель с 2 div для очков и жизни, оба содержат текст и 1 значок, я хочу абсолютно позиционировать div, чтобы позже я мог манипулировать ими с помощью jQuery.

моя проблема в том, что когда я вставляю элементы в свои точки и жизненный элемент, они для меня сходят с ума, перекрытие и верх/справа, похоже, не имеют никакого эффекта, а также элементы внутри элемента не соответствуют моей позиции: абсолютной , я пробовал всевозможные комбинации с относительным, абсолютным, отображением: блок и т. д., но безрезультатно.

Я скомпилировал Fiddler, чтобы визуализировать свою проблему: ссылка на Fiddler

если я изменю 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;
}

html css absolute position
person mads    schedule 19.06.2014    source источник
comment
Пожалуйста, опубликуйте свой HTML и CSS, чтобы люди могли прочитать его без необходимости открывать jsFiddle...   -  person Marc Audet    schedule 20.06.2014
comment
ОТРЕДАКТИРОВАНО: я думал, что люди скорее увидят это в действии :).   -  person mads    schedule 20.06.2014
comment
Причина публикации кода заключается в том, чтобы убедиться, что вопросы в SO остаются действительными и читабельными, даже если jsFiddle или CodePen должны исчезнуть...   -  person Marc Audet    schedule 20.06.2014

Ответы (1)


arrow_upward
0
arrow_downward

Я бы начал с закрытия ваших тегов div для ваших элементов imageClass.

Включение тегов h2 также может помочь. Вы можете сделать это либо с помощью display: inline;, либо изменить их на встроенный элемент по умолчанию, например span.

Вот скрипта

Изменение тегов h2 на теги span, как я сделал для скрипки, удаляет некоторые стили по умолчанию. Что-то, что следует учитывать, если вы выберете этот маршрут.

person brandonma    schedule 19.06.2014
comment
YUUP, который сделал это, ‹/div› сделал это.... черт возьми, это всегда мелочи, я был совершенно слеп к этому, читал свой код снова и снова, переписывал большие разделы и т. д. с положительной стороны, все остальное, кажется, работает в моем проекте, что означает, что я разбираюсь в этом: D. спасибо, парень, за второй глаз :) - person mads; 20.06.2014