Элементы, к которым применено свойство webkit-transform, перекрывают остальные. Это нормально?

html css web-разработка

То есть, если такой элемент на странице присутствует, то например выпадающая менюшка прячется под него. Игры с z-index'ом никакого результата не принесли.

Примечание:
serg54, я понимаю, что по идее должно быть так. Но вот пример: http://advokat.tmweb.ru/consult/
Вот он же на скриншоте: http://s005.radikal.ru/i209/1003/44/cf0d9a6ec141.png
Вот код:

#content article.faqlist div.question { /* для повёрнутого блока */
background: #eee1bc;
background: -moz-linear-gradient(right, #e5c68e, #eee1bc);
background: -webkit-gradient(linear, right top, left top, from(#e5c68e), color-stop(0.4, #eee1bc), to(#eee1bc));
filter: progid:DXImageTransform.Microsoft.gradient(enabled='true', startColorstr='#eee1bc', endColorstr='#eee1bc', GradientType=1);
padding: 16px;
margin: 16px 16px 0;
-webkit-transform: rotate(-1deg);
-webkit-transition-duration: 0.2s;
z-index: 5;
}

nav.services ul li:hover ul,
nav.services ul li.over ul { /* для выпадающей менюшки */
display: block;
z-index: 30;
}

Что я делаю не так?

Примечание:
serg54, отличное решение.
Главное — помогло.
Но всем родителям — это не наш метод. Методом научного тыка выяснено, что достаточно задать z-index только для ul или li в менюшке верхнего уровня. Для выпадающей части это свойство наследуется. Если же только выпадающей части присводить z-index, то не срабатывает.
Теперь понять бы, почему всё так, а не иначе.

Примечание:
> надо точно узнать того родителя которому единственному и нужно оставить z-index
вот похоже это <li>, который пункт верхнего уровня меню.
Статический — это что в данном случае означает? Если в том смысле, что не динамический, не появляется/исчезает в зависимости от действий пользователя или скрипта, то да, это самый прямой родитель, в котором расположен динамический блок.

Я поставила высокий z-index для элемента, содержащего выпадающее меню, потому как по логике именно выпадающее меню должно быть сверху, перекрывать остальное содержимое, а не какой-то из элементов страницы должен быть ниже остальных.

Примечание:
> нестатичкеский -любой другой в данном случае relative или absolute

я бы так и подумала, если б у элемента <li>, для которого успешно применён z-index, не был position: relative;
А так у <li> position: relative, у содержащегося в нём <ul> position: absolute; display: none;

Примечание:
> 1. body-header-nav-ul-li .....и этому li ты поставила z-index:30 значит остальные до body header-nav и ul статические
да

> 2 section-article-article-div..... и ктото из них тоже нестатический c z-index
нет

> общий нестатический элемент у этой пары body
вручную для body position не проставлен. В вычисленных стилях я его тоже не вижу. Но если я правильно умею читать документацию, то значение position по умолчанию static.

Примечание:
однако body можно спозиционировать вручную как угодно, и разместить где угодно относительно <html>, который в свою очередь тоже вполне управляем.

Примечание:
Как можно спозиционировать body: точно так же, как и любой другой элемент. Какой в этом смысл — вопрос уже другой.
Да и вообще, это всё уже дебри, которые радикально выходят за рамки обсуждаемого вопроса. Но с удовольствием обсужу их в личном общении. Мой джаббер указан в профиле. В том числе и с удовольствием поделюсь своим опытом (если, конечно, справедливо говорить о каком-то опыте, когда я всего пару месяцев занимаюсь данной темой, и не имею ещё ни одного запущенного работающего проекта).
Ответы:
Нет эти элементы также поддерживают z-index
вот простой пример найденный гдето в инете и дополненный
<style type="text/css" media="screen">
.square {position:absolute;
   width: 144px;
   height: 144px;
   background: #f0f;
   margin-right: 48px;
   float: left;
}
.transformed {
   -webkit-transform: rotate(15deg) scale(1.25, 0.5);
   -moz-transform: rotate(15deg) scale(1.25, 0.5);
   transform: rotate(15deg) scale(1.25, 0.5);
}
</style>
<div class="square"
style='z-index:5;background-color:green;'><p>Lorem ipsum dolor sit amet.</p></div>
<div class="square transformed"
style='left:20px;z-index:10;'><p>Lorem ipsum dolor sit amet.</p></div><div
class=".square"style='position:absolute;left:50px;width:200px;
height:50px;background-color:red;z-index:25'>tratata</div>
----------------------------------------------------
один элемент находится над другой под элементом со свойством webkit-transform благодаоя z-index:
обычные ошибки при манипулировании z-index-это когда пытаются его присвоить статическим элементам--или когда нужно манипулировать z-index ом одного из родителей а не самого элемента
Но всем родителям — это не наш метод.
-------------------------
абсолютно согласен-я думал сначала хоть  както решить прблему
z-index нужно установить единственному элементу остальные убрать
2 элемента тогда начинают конкурировать между собой через z-index когда имеют общего нестатического родителя
которого я называю offsetParent-как в библиотеке Prototype
если у них разные offsetParent то даже если они перекрываются z-index их не работают а работают z-index какихто их родителей которых надо точно узнать и установить им  z-index
--------------------------
ну вот получается
1. body-header-nav-ul-li .....и этому li ты поставила z-index:30 значит остальные до body  header-nav  и ul статические
2 section-article-article-div..... и ктото из них тоже нестатический c z-index
получается общий нестатический элемент у этой пары body и ты ближайшему нестатическому элементу и поставила z-index-все правильно
-------------------------------
&gt; общий нестатический элемент у этой пары body
вручную для body position не проставлен. В вычисленных стилях я его тоже не вижу. Но если я правильно умею читать документацию, то значение position по умолчанию static.
------------------------------
для body не надо ничего ставить-у него по умолчанию стоит static-но это особый элемент
так как это последний(или первый) элемент в дереве то он ведет себя как нестатический то есть его нестатические дочки позиционируются относительно его с помощью  z-index
вот если коротко
------------------------------------
однако body можно спозиционировать вручную как угодно, и разместить где угодно относительно <html>, который в свою очередь тоже вполне управляем.
.........
Я не знаю где можно разместить body-и как это будет выглядеть
Мое представление что body и есть документ а html эта надстройка нужна для того только чтобы еще включить head
Я здесь уже встречал вопрос даже html задавали position relative кажется-я просил рассказать что это значит но не ответили
В библиотеке Prototype имено body является последним offsetParent и я исхожу из этой модели
Я не представляю как body можно задать значение absolute и присвоить какието top и left
То есть моя модель заканчивается на body
Если есть какието мысли на этот счет у тебя или еще когонибудь было бы очень интернесно выслушать ибо надо же развиваться если я отстал от чегото


14 лет назад

RPI.su - самая большая русскоязычная база вопросов и ответов. Наш проект был реализован как продолжение популярного сервиса otvety.google.ru, который был закрыт и удален 30 апреля 2015 года. Мы решили воскресить полезный сервис Ответы Гугл, чтобы любой человек смог публично узнать ответ на свой вопрос у интернет сообщества.

Все вопросы, добавленные на сайт ответов Google, мы скопировали и сохранили здесь. Имена старых пользователей также отображены в том виде, в котором они существовали ранее. Только нужно заново пройти регистрацию, чтобы иметь возможность задавать вопросы, или отвечать другим.

Чтобы связаться с нами по любому вопросу О САЙТЕ (реклама, сотрудничество, отзыв о сервисе), пишите на почту [email protected]. Только все общие вопросы размещайте на сайте, на них ответ по почте не предоставляется.