Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > div position:absolute перекрывает соседний div pos

Автор: DrNemo 29.5.2012, 21:25

есть:

Код


<style>
.item{position:relative; float: left; }
.tools{position:absolute;}
</style>
<div>
<div class="item">aa<div class="tools">22</div></div>
<div class="item">as<div class="tools">33</div></div>
<div class="item">asd<div class="tools">44</div></div>
<div class="item">asd<div class="tools">55</div></div>
<div class="item">asd<div class="tools">66</div></div>
</div>

результат на скрине: http://photowar.ru/detail/?s1.phofxnbxq
как видно див с цифрами попадает под соседний див с буквами, задача что бы дивы с цифрами были выше всех блоков с цифрами. z-index не помогает

Автор: IBS 29.5.2012, 22:47

Цитата(DrNemo @ 29.5.2012, 21:25

)

див с цифрами попадает под соседний див с буквами,

Как это под соседний?

Цитата(DrNemo @ 29.5.2012, 21:25

)

Он же вложенный!

Автор: DrNemo 29.5.2012, 22:58

я специально приложил скрин, обратите внимание:
див с цифрами "22", вложенный в див с "aa", залезает под див "as"

Автор: IBS 29.5.2012, 23:08

а как вы устанавливали z-index ?

Автор: DrNemo 29.5.2012, 23:17

другого способа не знаю)

Код


.item{position:relative; float: left; z-index:5}
.tools{position:absolute; z-index:15;}

Автор: IBS 30.5.2012, 01:26

А что если так:

Код


<style>
    .item
    {
        float:left;
        position: relative;
        background-color:Red;
        border:1px solid black;
        padding:10px;
        z-index:auto;
    }
    .tools
    {
        background-color:Green;
        border:1px solid black;
        position: absolute;
        padding:20px;
        z-index:20;
    }
</style>

Автор: Aliance 30.5.2012, 09:50

Я так понимаю, что нужно прописать z-index у того слоя (.item), что справа, больше, чем у того слоя, что слева. То есть если на странице 5 элементов .item, то самому левому прописать, скажем, 1. А у самого правого (пятого) будет тогда 5.

Автор: DrNemo 30.5.2012, 13:29

решение найдено:
http://jsfiddle.net/T4JX7/
из-за особенностей действия z-index
http://www.w3.org/TR/CSS21/visuren.html#z-index
http://www.w3.org/TR/CSS21/zindex.html
http://developer.mozilla.org/en/CSS/Understanding_z-index/The_stacking_context
как-то так короче)