Как передвинуть элемент на передний план?

Question

[Матвей Мамонов]

Я чувствую, что ответ где-то рядом, но что-то все равно в голову ничего не приходит, хоть уже все перепробовал.

Итак, есть такой код:

<div class="layer" id="userbox-layer" style="visibility: hidden">
	<div class="overlay">
		<span data-content="flaticon close"></span>
	</div>
	<div class="window">
		<header><span data-content="flaticon account"></span> Аккаунт</header><br>
		<a data-name="profile"><?php $main = new Main; print($main->GetLogin()); ?></a><br>
		<a data-name="author">Стать автором</a><br>
		<a data-name="favorite">Избранное</a><br>
		<a data-name="settings">Настройки</a><br>
		<a href="http://codeinroad.tk/account/exit/index.php?location=<?php print($_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']); ?>" data-name="exit">Выход</a>
	</div>
</div>

Это меню, которое открывается на весь экран. В div.overlay вы можете видеть span. Этот span - элемент закрытия. Если по нему кликнуть, то меню закрывается. Позиционирован он абсолютно.

margin: 0px;
padding: 20px;
top: 0px;
right: 0px;
position: absolute;
color: #cccccc;
cursor: pointer;

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

Я думаю, что дело тут в z-index. Пробовал ставить z-index span'а больше, чем z-index div.window'а, но это не помогает.

Что делать?

Answer 1

[Константин]

z-index должен понимать позицию элемента например position:relative; прописать у каждого элемента со свойством z-index

Answer 2

[Станислав]

Разместить .overlay после .window
И у overlay и у window прописаны z-index и position, верно?

Comments

[Матвей Мамонов]

.overlay - это подслойка под .window, позволяющая сделать белый фон, что тем самым разворачивает меню на весь экран (визуально).

[Матвей Мамонов]

И да, position везде absolute, иначе бы они занимали место на странице, пока не были открыты.

[Станислав]

Прошу прощения, упустил этот момент. В таком случае не получится реализовать желаемое, проще будет поместить кнопку закрытия в .window. Если в window динамический контент, то достаточно добавить в .window кнопку и еще div.content, в который непосредственно подгружать контент.

Просто получается, что у вас window выше overlay по z-index, а кнопка - это ребенок overlay, который может по z-index тягаться с соседними элементами. Была такая задача, правда года 3-4 назад, не решил. Не думаю, что что-то поменялось.

[Матвей Мамонов]

Станислав: Дело в том, что если поместить кнопку закрытия в .window, то она будет позиционировать относительно .window'a. А поскольку .window не занимает всю высоту страницы, то и кнопка будет не в самом верху.

Тут есть несколько вариантов, если кнопку в .window засунуть:
1. Либо .window делать на всю страницу (не подходит, так как отступы нужны)
2. Либо как-то сделать так, чтобы кнопка позиционировалась относительно всей страницы, даже если ее родитель - .window.

Вопрос один. Как? (Ко второму варианту).

[Станислав]

Матвей Мамонов: а .layer тоже растягивается на всю страницу? Если так, то кнопку сделать ребенком .layer. Т.е. у нас есть общий контейнер, растянутый на всю страницу, внутри него 3 элемента - .overlay, .window и кнопка. В таком случае кнопка позиционируется относительно всего окна.

[Матвей Мамонов]

Станислав: а в таком случае она вообще за всем .layer'ом скрывается. Сейчас еще раз попробую, чтобы убедится, и отпишусь.

[Матвей Мамонов]

Станислав: Да, крестик тогда прячется за .layer'ом, как я и говорил. По идее, это самое рациональное решение. Только надо его поместить наверх. Но как?

[ultrbi4]

выносите кнопку закрытия за .window и делайте ей самый большой z-index

[Станислав]

Матвей Мамонов: т.к. в данном случае все элементы - братья по дереву dom, то теперь их видимость можно делать через z-index. Т.е. крестику, как написали выше, поставить просто z-index большой. Т.е. .
overlay - z-index: 1,
.window z-index: 2,
кнопка z-index: 3,

[Матвей Мамонов]

Станислав: Решил проблему добавлением различных стилей к показанной и еще не показанной кнопке закрытия. То есть как у .window'а и у .overlay'а были условия при просто .layer и при .layer.show, так и у span'а закрытия теперь тоже такое есть. А было это нужно для того, чтобы как и в остальных элементах при показе добавить видимость элемента.

[Станислав]

Матвей Мамонов: по хорошему, видимость должна быть у общего контейнера, соответственно, у .layer должен быть класс .show

[Матвей Мамонов]

Станислав: по идее, так и есть (уже). Просто на ранних этапах это упустил.

[Станислав]

Матвей Мамонов: если так и есть, то идея поместить в контйнер три элемента - оверлэй, контент и кнопку, что я предлагал - самое логичное решение, на мой взгляд. Тогда видимостью можно управлять легко через zindex между этими тремся элементами.

[Матвей Мамонов]

Станислав: да, так и получилось. Проблема решена уже ведь, я же отписывался :)
На самом деле это было одним из первых моих решений, только оно не увенчалось успехом, потому что я не прописал разные стили для показанного меню и для скрытого.

[Матвей Мамонов]

Станислав: и, кстати, z-index вообще не понадобился, так как я просто поместил кнопку как последний дочерний элемент. И поэтому у нее z-index автоматически становится больше своих соседей.