Как расположить один блок поверх другого?

Lex-DRL · March 19, 2010

Имеется 2 блока. В одном - фон, составленный из обрезков. В другом - собственно контент.

Задача: расположить второй блок (div с контентом) поверх первого так, чтобы фон покрывал весь контент.

Фон (в 1 блоке) сделан в виде таблицы 3x3, в которой боковые стороны тянутся, а углы - фиксированного размера. Это для того, чтоб фон был резиновым не только по горизонтали, но и по вертикали. Поэтому просто вложить слой с контентом внутрь слоя с фоном не получится.

Если абсолютно позиционировать фон - то он отрисовывается поверх контента, так что это тоже не подходит.

</div>

<div id="page-front">Контент.</div>

</div>

Расположение блоков фона:

1 2 3

4 5 6

7 8 9

Где красные иксы - там тянется.

В итоге нужно получить это:

На данный момент имеется:

BODY, *, * html {

border: none;

background: none;

margin: 0;

padding: 0;

}

#page {

background: black;

color: white;

padding: 10px;

overflow: hidden;

}

#page-back, #page-front {

float: left;

}

#page-back {

background: green;

position: relative;

width: 100%;

min-height: 100%;

}

#page-front {

background: blue;

margin: 0 -100%;

width: 100%

}

С CSS только знакомлюсь - но уже поражён тем, насколько трудно реализуется такая элементарная вещь, как резиновый фон.

Edited March 19, 2010 by Lex-DRL

psywalker · March 19, 2010

Слушай, а вопрос.

Ты хочешь, чтобы нижние дивы были всегда внизу, прилипали к низу? Или можно сделать так, чтобы они продолжались потоком сразу после контента?

Lex-DRL · March 19, 2010

Если под нижними имелись в виду 7, 8, 9 - то их нижняя граница должна совпадать с нижней границей контента, т.к. это на схеме они маленькие, а на деле там градиент по 100-200 пикселей, что кое-где составляет половину контента.

Тут вся соль в том, что фон должен быть именно за контентом, а не вокруг.

Edited March 19, 2010 by Lex-DRL

psywalker · March 19, 2010

Если под нижними имелись в виду 7, 8, 9 - то их нижняя граница должна совпадать с нижней границей контента, т.к. это на схеме они маленькие, а на деле там градиент по 100-200 пикселей, что кое-где составляет половину контента.

Лана, не важно, хрен с ним короче, лови, там сам доделаешь уже

<!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: 0; padding: 0;}	
		html,body { height: 100%; min-width: 800px;}

		/* Главные контейнеры */
		div.wrap { min-height: 100%; position: relative;}
		div.wrap div.wrap_float { overflow: hidden; padding-bottom: 120px;}

		/* Блоки Абсолюты - Общие стили */
		div.wrap div#left,
		div.wrap div#right,
		div.wrap div#content {
			position: absolute;
			top: 100px;
			bottom: 100px;
			width: 300px;
			background: red;
			z-index: -1;

		}

			/* Блоки Абсолюты - Отдельные стили */
			div.wrap div#left { left: 0;}
			div.wrap div#right { right: 0;}		
			div.wrap div#content { left: 300px; right: 300px; width: auto; background: blue;}

		/* Главные колонки - Общие стили */
		div.wrap div.left-float,
		div.wrap div.right-float,
		div.wrap div.content-float { float: left; width: 260px; padding: 20px;}

			/* Главные колонки - Отдельные стили */
			div.wrap div.right-float { float: right;}
			div.wrap div.content-float { float: none; width: auto; overflow: hidden;}

		/* Хедер и Футер */
		div.wrap div.head { height: 100px; background: #F63;}
		div.wrap div.foot { 
			height: 100px; 
			background: #F63;
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
		}


	</style>

	<!--[if IE 6]>
		<style type="text/css">
		body { width:expression(document.documentElement.clientWidth < 800 ? "800px" : "auto");}

			/* Главный контейнер */
			div.wrap {
				height: 100%;
			}

		/* Блоки Абсолюты - Общие стили */
		body div.wrap div#left {height: expression(document.body.clientHeight-200+'px');}
		div.wrap div#right {
			height: expression(document.body.clientHeight-200+'px');
		}

		body div.wrap div#content {
			height: expression(this.parentNode.offsetHeight-200+'px');
			width: expression(this.parentNode.offsetWidth-600+'px');
		}

		div.wrap div.wrap_float,
		div.wrap div.content-float  { zoom:1;}
		</style>
	<![endif]-->

		<!--[if IE 7]>
		<style type="text/css">
			/* Главный контейнер */
			div.wrap {
				zoom:1;

			}
			div.wrap div.right {height: auto;height: expression(document.body.clientHeight-200+'px');}
		</style>
	<![endif]-->
</head>

<body>

	<!-- wrapper  -->
	<div class="wrap">
		<div id="left"></div>
		<div id="content"></div>
		<div id="right"></div>
		<!-- header -->
		<div class="head">Header</div>

		<!-- wrapper for float -->

		<div class="wrap_float">

		<!-- left column -->
		<div class="left-float">


  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem 
  nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>
  <p>Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper 
  suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem 
  nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>
  <p>Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper 
  suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem 
  nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>
  <p>Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper 
  suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem 
  nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>

		</div>

		<!-- right column -->
		<div class="right-float">


  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem 
  nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>

  <p>Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper 
  suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem 
  nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>
  <p>Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper 
  suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem 
  nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>
  <p>Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper 





		</div>

		<!-- content -->

		<div class="content-float">


  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem 
  nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>
  <p>Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper 
  suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem 
  nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>
  <p>Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper 
  suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem 
  nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>

  <p>Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper 
  suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem 
  nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>
  <p>Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper 
  suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>





		</div>
		</div>
		<!-- footer -->
		<div class="foot">Footer</div>


	</div><!-- out wrapper -->

</body>
</html>

Lex-DRL · March 19, 2010

Благодарю. Ушёл разбираться с этим кодом.

psywalker · March 19, 2010

Благодарю. Ушёл разбираться с этим кодом.

Давай, удачи тебе

Lex-DRL · March 20, 2010

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

Как я понял:

Ты просто делаешь каждый слой с фоном абсолютно-позиционированным, ставишь куда надо и растягиваешь на всю высоту родительского блока (кстати за растягивание через top и bottom - отдельное спасибо, сам как-то протупил). Чтоб абсолюты были относительно его - ставишь ему relative, а чтоб абсолюты не перекрывали контент - ставишь им z-index: -1.

Вот тут-то и загвоздка. z-index с отрицательными значениями обрабатывается не всеми браузерами, а с положительными - фишка не пашет: абсолюты всё равно рисуются поверх, что я ни пробовал (ставил абсолютам 0 или 1, а .head, .right-float и .foot - поболее).

Я и сам когда в начале перебирал варианты - пробовал сделать через абсолюты (правда растянуть пытался через min-height, до твоего способа в спешке не догадался). Но отказался я от этого варианта как раз потому, что пользуясь только положительными значениями z-index расположить абсолюты за контентом не удалось.

Если я тебя ещё не совсем достал - тогда вопрос: можно ли эту проблему как-нить обойти? Потому что способ самый дельный, и после того, как ты мне его предложил - я к нему склоняюсь ещё больше.

Если так приставать с моей стороны уже нагло - тогда прошу прощения, пойду искать где-нить ещё.

Честно скажу, с кодом в условных комментариях я ещё не разбирался, т.к. пока не знаком с ишаковскими экспрешнами.

Edited March 20, 2010 by Lex-DRL

psywalker · March 20, 2010

Дело в том, что перед тем, как давать код, я всегда проверяю его на деле, на полный кросс, и у меня лично везде всё смотрится одинаково, включая ИЕ6. Далее на рисунке твоём происходит такая же фигня, как в моём примере, т.е. задача решена по-идее, осталось может добавить в углы по дивам, но это уже не суть.

http://i077.radikal.ru/1003/b1/1f9d3657f889.png

Lex-DRL · March 20, 2010

осталось может добавить в углы по дивам, но это уже не суть

Да не, я не о соответствии схеме. Принцип понял - мелочи и сам подправить могу.

Я о том, что:

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

Firefox 3 корректно понимает отрицательное значение z-index.

Это отсюда.

Соотв-но, я опасаюсь за отображение в ФФ 2. Насколько я помню, ФФ3 вышел относительно недавно. Сам проверить не могу - тупо не нашёл ФФ2. Или на нём ты тоже провераял?

Edited March 20, 2010 by Lex-DRL

psywalker · March 20, 2010

Это отсюда.
Соотв-но, я опасаюсь за отображение в ФФ 2. Насколько я помню, ФФ3 вышел относительно недавно. Сам проверить не могу - тупо не нашёл ФФ2. Или на нём ты тоже провераял?

Самые оптимистические статистики сообщат тебе, что ФФ2 пользуется 0.7%, а значит на этот браузер уже давно можно подзабить.

Lex-DRL · March 20, 2010

ОК, тогда всё прекрасно. Как сделаю окончательный вариант решения поставленной задачи (тянущийся во все стороны бэк) - скину сюда код.

Ещё раз спасибо.

Lex-DRL · March 21, 2010

Сделал. Но пока с экспрешнами ИЕ не разобрался - так что без них. Кто знает - может сам сделать по аналогии с кодом, предложенным psywalker.

Фон составлен из 9 блоков таблицей 3x3. Углы - фиксированные, стороны-заполнители - тянущиеся. Центральный (5-ый) слой сделан рассчётом на то, что для окружающих его блоков периметра в качестве бэка используются PNG с переходом через прозрачность к основному фону. Поэтому 5-ый блок немного больше - чтобы охватить зону перехода.

Габариты фиксированной рамки: слева и справа - по 30, сверху - 45, снизу - 60.

min-width: 800px у боди выставлена с рассчётом на общие габариты сайта.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html dir="ltr" xml:lang="ru" 
xmlns="http://www.w3.org/1999/xhtml" lang="ru">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Simple Test | Простой тест</title>
	<link type="text/css" rel="stylesheet" media="all" href="simpletest.css">
</head>
<body>
<div id="page">
  <div id="page-back">
	<div class="back-5"></div>
	<div class="back-1"></div><div class="back-2"></div><div class="back-3"></div>
	<div class="back-4"></div><div class="back-6"></div>
	<div class="back-7"></div><div class="back-8"></div><div class="back-9"></div>
  </div>
  <div id="page-front">Содержимое блока "page-front".</div>
</div>
</body>
</html>

CSS:

* {
  margin: 0;
  padding: 0;
}
HTML, BODY {
  height: 100%;
  min-width: 800px;
}

/* Стиль контейнера */
#page {
  min-height: 105px;
  min-width: 60px;
  position: relative;
  margin: 0 auto;
  color: white;
}


/* Общие стили фоновых блоков */
#page-back,
.back-1, .back-2, .back-3,
.back-4, .back-5, .back-6,
.back-7, .back-8, .back-9 {
  position: absolute;
  z-index: -1;
}
/* Стили для блоков, общие по рядам */
.back-1, .back-2, .back-3 {
  height: 45px;
  top: 0;
}
.back-4, .back-6 {
  top: 45px;
  bottom: 60px;
}
.back-7, .back-8, .back-9 {
  height: 60px;
  bottom: 0;
}
/* Стили для блоков, общие по столбцам */
.back-1,
.back-4,
.back-7 {
  width: 30px;
  left: 0;
}
	.back-2,
	.back-8 {
	  left: 30px;
	  right: 30px;
	}
		.back-3,
		.back-6,
		.back-9 {
		  width: 30px;
		  right: 0;
		}

/* Индивидуальные стили фоновых блоков */
#page-back {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
/* Центральный (5-ый) блок чуть больше, чтобы можно было сделать плавный переход от блоков периметра к нему через прозрачность. Для этого он должен полностью охватывать область перехода. */
.back-5 {
  left: 10px;
  right: 10px;
  top: 30px;
  bottom: 40px;
  background: maroon;
}
/* У блоков периметра индивидуально настраивается только фон */
.back-1 { background: darkblue;}
.back-2 { background: green;}
.back-3 { background: darkblue;}
.back-4 { background: green;}
.back-6 { background: green;}
.back-7 { background: darkblue;}
.back-8 { background: green;}
.back-9 { background: darkblue;}


/* Стиль переднего блока с контентом */
#page-front {
  float: none;
  padding: 30px 20px;
  width: auto;
  overflow: hidden;
}

Edited March 21, 2010 by Lex-DRL

Sign In

Как расположить один блок поверх другого?

Question

Link to comment

Share on other sites

11 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

Join the conversation

Обсуждения

Important Information