Не накладываются слои.

tierra · October 30, 2009

Всем привет)

Вот такая загвоздка - довольно стандартная - блоки не накладываются. Второй принимает за top 0px - нижний край верхнего блока. Всю голову сломала, но не вижу ошибку, поэтому обращаюсь за помощью. Слаба я еще очень в этих делах. Спасибо.

#shapka { position:position: relative;
 	width: 794px; /* Ширина слоя */
 	height: 342px; /* высота слоя */
 	margin: 0 auto; /* Выравниваем по центру */
 	background: #990000; /* Цвет фона */
	background-image: URL(tr_01.gif);
 	z-index: -1;
}

#menu { position: relative;
	top: 292;
	width: 794px; /* Ширина слоя */
	height: 45px; /* высота слоя */
	margin: 0 auto; /* Выравниваем по центру */
	z-index: 1;
}

DjTarik · October 30, 2009

position:position: relative; O_o

Veseloff · October 30, 2009

а в хтмл это как выглядит?

position:position: relative;

а это что за безобразие?

Игорь Ермаков · October 30, 2009

#shapka

Просто противно, замените на

#header

Синтаксическая ошибка:

position:position: relative;

Вот это:

background: #990000; /* Цвет фона */
background-image: URL(tr_01.gif);

Меняем на это:

background:#990000 url(tr_01.gif) [b]здесь указать тип тиражирования[/b];

Читать:

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

http://htmlbook.ru/css/position.html

http://htmlbook.ru/css/background.html (обратите внимание на repeat)

В принципе всё должно работать, когда исправите синтаксис. Не будет работать выкладывайте HTML код.

Justnewone · October 30, 2009

Ну что накинулись? =)

Давайте ссылку на выложенный сайт на каком-неть хотинге, а то у Вас все что угодно может быть.

tierra · October 30, 2009

Спасибо! Ну я слепая!

Вот только все равно не заработало.

<body bgcolor=#330000 text=#ffcccc>

<div id=shapka></div>

<div id=menu>
<table border="0"><tr align="center">
<td width="157" height="45"><strong>РАСПИСАНИЕ</strong></td>
<td width="157" height="45"><strong>ЦЕНЫ</strong></td>
<td width="157" height="45"><strong>Что нужно на <br>1 занятие</br></strong></td>
<td width="157" height="45"><strong>СКИДКИ</strong></td>
<td width="157" height="45"><strong>OГРАНИЧЕНИЯ</strong></td>
</tr></table></div>

</body>

ПС: шапку поменяла, дабы противно не было, но здесь оставила - чтоб сопоставить можно было

Игорь Ермаков · October 30, 2009

<div id=shapka>

<div id=menu>

Это ещё что за ересь? Все атрибуты пишутся так: имя атрибута = "значение"

Всегда в двойных или одинарных кавычках.

У вас просто стили не применяться.

Установите Notepad++ для работы, очень полезная штука.

Виноградов Александр · October 30, 2009

Да просто поставь минус в коде:

#menu {top: -292px;}

Edited October 30, 2009 by Виноградов Александр

Игорь Ермаков · October 30, 2009

Да просто поставь минус в коде:
#menu {top: -292px;}

А это ещё на кой чёрт?

Виноградов Александр · October 30, 2009

Ну как я понял, ей нада чтобы слои легли друг на друга. Второй див поднимаем на нужное расстояние, чтобы он был поверх первого. Или я не правильно понял суть вопроса?

Игорь Ермаков · October 30, 2009

Топик стартер, проделайте как вот что:

http://htmlbook.ru/css/z-index.html зайдите на это страницу и перепишите весь код вручную тщательно вникая в его суть, после этого у вас не возникнет никаких вопросов. Если вам будет непонятен какой-то момент открывайте http://htmlbook.ru/ и читайте по нему мануал. Если там нет этого (что маловероятно) спрашивайте на форуме.

Виноградов Александр · October 30, 2009

Игорь, Вы это мне? Я не понял, так если добавить просто минус в позиционирование top все работает. И div ложиться поверх, как и требуется. Ессественно z-index у второго должен быть больше чем у первого, чтобы он лежал выше.

Игорь Ермаков · October 30, 2009

Нет, это я топик стартеру.

Вот за три минуты сделал упрощённый пример наложения слоёв при помощи z-index;

<!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=utf-8">
<title>Наложение слоёв</title>
<style type="text/css">
*{margin:0px;padding:0px}
.layer{background:#ccc;
width:250px;height:250px;
z-index:1}
.layer1{background:#666;
width:250px;height:250px;
position:absolute;top:125px;left:125px;
z-index:2}
</style>
</head>
<body>
<div class="layer"></div>
<div class="layer1"></div>
</body>
</html>

Виноградов Александр · October 30, 2009

<head>
<style>

#header { 
	position:			relative;
	width:			794px; /* Ширина слоя */
	height:			342px; /* высота слоя */
	margin:			0 auto; /* Выравниваем по центру */
	background:		#990000; /* Цвет фона */
	background-image:	URL("tr_01.gif");
	z-index:			1;
}

#menu { 
	position:	relative;
	top:		-292px;
	width:	794px; /* Ширина слоя */
	height:	45px; /* высота слоя */
	margin:	0 auto; /* Выравниваем по центру */
	z-index:	2;
}

</style>
</head>

<body bgcolor = "#330000" text = "#ffcccc">

<div id = "header"></div>

<div id = "menu">
	<table border = "0">
		<tr align = "center">
			<td width = "157" height = "45"><strong>РАСПИСАНИЕ</strong></td>
			<td width = "157" height = "45"><strong>ЦЕНЫ</strong></td>
			<td width = "157" height = "45"><strong>Что нужно на <br>1 занятие</br></strong></td>
			<td width = "157" height = "45"><strong>СКИДКИ</strong></td>
			<td width = "157" height = "45"><strong>OГРАНИЧЕНИЯ</strong></td>
		</tr>
	</table>
</div>

Edited October 30, 2009 by Виноградов Александр

tierra · October 30, 2009

Спаибо за "-")) Не знаю, насколько это правильно, но встает куда надо)) Единственно, с другими значениями. Но я все равно не понимаю, почему за 0px стал приниматься край блока...

Стили применяются...

Игорь Ермаков · October 30, 2009

Не понимаю вас. Выражайтесь точнее.

mishka · October 30, 2009

position:relative - это относительное позиционирование. Тоесть позиционируется относительно своего статического положения. Если элементу задать релейтив и при этом не указать top, left, right или bottom(естественно все 4 сразу нестоит указывать(ну тут тоже вопрос не однозначный - смотря какие цели преследуете, и полностью ли понимаете как это работает) то елемент будет находится на своем месте где был бы при статическом позиционировании, ну и естественно поднимется выше "по оси z".

А вообще чтото мне ненравится ваша затея с таким "подтягиванием" менюшки

Edited October 30, 2009 by mishka2

tierra · October 30, 2009

position:relative - это относительное позиционирование. Тоесть позиционируется относительно своего статического положения. Если элементу задать релейтив и при этом не указать top, left, right или bottom(естественно все 4 сразу нестоит указывать(ну тут тоже вопрос не однозначный - смотря какие цели преследуете, и полностью ли понимаете как это работает) то елемент будет находится на своем месте где был бы при статическом позиционировании, ну и естественно поднимется выше "по оси z".
А вообще чтото мне ненравится ваша затея с таким "подтягиванием" менюшки

Спасибо, я поняла. Идея мне тоже не нравится. Я переделаю. Еще раз спасибо.

Sign In

Не накладываются слои.

Question

Link to comment

Share on other sites

17 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

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