VPF::div position:absolute перекрывает соседний div pos

DrNemo

Дата 29.5.2012, 21:25 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 193
Регистрация: 7.12.2005
Где: Не пейте ракетное топливо! :-)

Репутация: нет
Всего: 1

есть:

Код


<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 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 214
Регистрация: 29.7.2008
Где: Белоруссия

Репутация: 2
Всего: 6

Цитата(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 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 214
Регистрация: 29.7.2008
Где: Белоруссия

Репутация: 2
Всего: 6

а как вы устанавливали 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 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 214
Регистрация: 29.7.2008
Где: Белоруссия

Репутация: 2
Всего: 6

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

Код


<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 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 2
Всего: 137

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

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

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/Unders...tacking_context
как-то так короче)

Это сообщение отредактировал(а) DrNemo - 30.5.2012, 13:30

--------------------

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »