Борьба position:absolute и position:relative с z-index

XXXVII · January 23, 2008

Расскажите, по какому принципу определяется приоритет блоков, спозиционированных абсолютно и относительно? Т. е. всегда ли блок с position:absolute будет находиться над блоком с position:relative ? У меня сложилась такая ситуация в Mozilla и z-index не помогает ее исправить. Причем в IE 7 как ни странно отображается согласно моей задумке

Vlad · January 24, 2008

Картинку приведи с задумкой.

XXXVII · January 24, 2008

Заранее прошу прощения за кривизну картинок

klierik · January 24, 2008

скажите, пожалуйста, а как должно вообще быть?

и покажите ваш код

yopopt · January 24, 2008

Набросал примерчик, смотрите, разбирайтесь:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Title</title>
	<style type="text/css">
	/*<![CDATA[*/

	.left {
		background-color: green;
		width: 200px;
		height: 300px;
		position: absolute;
		left: 20px;
	}
	.right {
		background-color: darkblue;
		width: 400px;
		height: 400px;
		position: relative;
		margin-left: 30%;
	}
	/*]]>*/
	</style>
</head>
<body>

<div class="left"><!-- --></div>
<div class="right"><!-- --></div>

</body>
</html>

klierik · January 24, 2008

это тут зачем?

yopopt · January 24, 2008

это тут зачем?
Ой, поправил. Изначально была задумка сделать два варианта: один с position, второй с float. Но потом поленился.

Vlad · January 24, 2008

Я бы предложил в строке margin-left: 30%; пикселы использовать, но это уже дело автора, кто ж знает, что ему в действительности требуется.

XXXVII · January 25, 2008

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

yopopt · January 25, 2008

Какие-то нереальные вещи говорите... Покажите свой код.

yopopt · January 26, 2008

Уберите z-index: -1; в #left-abs-block.

XXXVII · January 26, 2008

тогда при сжатии страницы левое меню начинает наезжать на правый блок контента

XXXVII · January 26, 2008

Решил проблему обходным путем, но все равно спасибо за понимание. Ссылку на проект удалю, т.к. он еще не сдан

yopopt · January 26, 2008

Я не пойму как там что может наезжать, если у Вас стоит min-width...

Но если уж так надо чтобы правый блок наезжал на левый, то поставьте #middle position: relative; и z-index: 1.

XXXVII · January 26, 2008

Там почему-то возникала такая ситуация, что при любых параметрах z-index у блоков левый блок постоянно наезжал на правый. То есть у него 2 положения получалось: либо над всеми блоками, либо под всеми. Мне кажется, что на это может влиять таблица, т.к. для них по-другому z-index обрабатывается, насколько я понял. Но до конца к сожалению я не смог разобраться с этим - пришлось придумать обходной вариант.

Sign In

Борьба position:absolute и position:relative с z-index

Question

Link to comment

Share on other sites

14 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information