Форум

imediasun1 · #1 (**permalink**) 28.11.2013, 23:11

можно ли оставить у родителя z-index:99 а у потомка z-index:999
В данном исполнении картинка перекрывает кнопку, а должна кнопка быть по любому свеху, но картинка должна перекрывать контент

<img id="right_pic" src="/img/right_pic.png" alt="">
<div id="content_container">
	<div id="btn" class="btn">
        </div>
</div>
<style>
#right_pic{
z-index:998;
}
#content_container{
z-index:99;
}
#btn{
z-index:999;
}
</style>

ksa · #2 (**permalink**) 29.11.2013, 09:08

Сообщение от imediasun1

можно ли оставить у родителя z-index:99 а у потомка z-index:999

А попробовать самому?

ksa · #3 (**permalink**) 29.11.2013, 09:11

Сообщение от imediasun1

<img id="right_pic" src="/img/right_pic.png" alt="">
<div id="content_container">
	<div id="btn" class="btn">
        </div>
</div>
<style>
#right_pic{
z-index:998;
}
#content_container{
z-index:99;
}
#btn{
z-index:999;
}
</style>

Начнем с букваря...

Цитата:

Любые позиционированные элементы на веб-странице могут накладываться друг на друга в определенном порядке, имитируя тем самым третье измерение, перпендикулярное экрану. Каждый элемент может находиться как ниже, так и выше других объектов веб-страницы, их размещением по z-оси и управляет z-index. Это свойство работает только для элементов, у которых значение position задано как absolute, fixed или relative.

http://htmlbook.ru/css/z-index

imediasun1 · #4 (**permalink**) 29.11.2013, 14:06

так не работает так #right_pic перекрывает #btn
позиционирование задано так

<img id="right_pic" src="/img/right_pic.png" alt="">
	<div id="content_container">
	    <div id="btn" class="btn">
				<ul>
				<li><a href=""><h3>О фонде</h3></a>
				</li>
				<li><a href=""><h3>Руководство</h3></a>
				<div id="guide">
				</div>
				</li>
				<li><a href="/main/"><h3>Контакты</h3></a>
				</li>
				</ul>
				</div>
	</div>
	<style>
	#right_pic{
        position:absolute;
	z-index:998;
	}
	#content_container{
        position:relative;
	z-index:99;
	}
	#btn{
        position:relative;
	z-index:999;
}
</style>

ksa · #5 (**permalink**) 29.11.2013, 15:01

Сообщение от imediasun1

позиционирование задано так

Теперь-то оно задано!

Только подсказать что-то не получится, т.к. примера как такового нет...

ksa · #6 (**permalink**) 29.11.2013, 15:12

imediasun1, сама идея твоей верстки - фигня.

Ты сам себе придумал трудности... А теперь героически пытаешся их преодалеть.

Как вариант...

<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
#right_pic{
	position:absolute;
}
#content_container{
	position:relative;
}
#btn{
	position:relative;
}
#btn a {
	color: yellow;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div id="content_container">
	<img id="right_pic" src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" alt="" />
	<div id="btn" class="btn">
		<ul>
			<li><a href=""><h3>О фонде</h3></a>
			</li>
			<li><a href="">
				<h3>Руководство</h3></a>
				<div id="guide"></div>
			</li>
			<li><a href="/main/"><h3>Контакты</h3></a>
			</li>
			</ul>
	</div>
</div>
</body>
</html>

imediasun1 · #7 (**permalink**) 29.11.2013, 15:50

Да нет трудности есть и позиционирование необходимо
http://pasalskiy.com.ua/main/pages/about
Здесь правая сторона без позиционирования но она должна перекрывать и левый сайдбар (тень отбрасывать)
а здесь уже необходимо наверное тогда как то отрицательный z-index применять , а есть ли вообще такая возможность?

ksa · #8 (**permalink**) 29.11.2013, 15:55

imediasun1, ты роешь подземный ход на чердак...

imediasun1 · #9 (**permalink**) 29.11.2013, 16:36

сейчас все нормально только что то перекрывает сайд бар теперь

Форум

Справочник

Discord чат

Курсы javascript