Сайт о правильных сайтах







Введение

CSS2 предоставляет разработчикам самостоятельное средство, позволяющее организовать пространство Web-страницы в виде набора прямоугольных областей с различными свойствами т.е. в виде блочной модели. Блочная модель присутствовала в CSS с самого начала, но в спицификации CCS2 она подверглась существенным дополнениям и коррективам.

Любой элемент HTML в визуальном представлении помимо непосредственного содержимого может иметь также поля, рамку и отступы.

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

Рамка (border) представляет собой видимый контур, для которого можно определять такие характеристики, как толщина, цвет, тип линии.

Поля (padding) отделяют содержимое элемента от рамки. Фон полей совпадает с фоном, определённым для содержимого.

Отступы (margin) отделяют содержимое элемента от рамки. Это своеобразная "полоса отчуждения", характеризующее минимально возможное расстояние от рамки до соседних элементов или до границ содержимого родительского элемента. Фон отступов всегда является прозрачным.

B CSS определены одноимённые свойства: border, padding и margin для задания рамки, полей и отступов соответственно.

Визуальное отображение элемента в соответствии с блочной моделью CSS

Рамки, поля и отступы

Свойство border объединяет свойства: border-style; border-width; border-color, позволяющие определить тип линии рамки, её толщину и цвет соответственно. Ниже следующее правило применяет ко всем заголовкам первого уровня сплошную рамку зелёного цвета толщиной в один пиксел:

h1 {border: solid 1px #090}

Это правило полностью аналогично такому:

h1 {

  border-style: solid;

  border-width: 1px;

  border-color: #090;

   }

Обобщенное свойство border не позволяет задавать индивидуальные правила оформления рамки для каждой из четырех сторон блока, однако это все-таки можно сделать, применяя свойства border-top, border-bottom, border-left и border-right, позволяющие определить стиль оформления соответственно для верхней, нижней, левой и правой линий рамки.

Ниже приводится пример на задание в таблице стилей полей, отступов и рамок:


html, body {

  margin: 0px;

  padding: 0px;

  border: 0px;

   }

body {

  color: #000;

  background: #fff;

   }

h1 {

  font: 120% Tahoma, Verdana, Arial, Helvetica, sans-serif;

  background: #f0f0f0;

  border-style: solid dotted;

  border-width: 3px 5px;

  border-color: #c00;

  padding: 5px 20px;

  margin: 20px;

   }

p {

  margin: 0px 20px 20px 100px;

   }

h1 {

  border-top: none;

  border-rigth: none;

  border-left: solid 15px #c00;

  border-bottom: solid 3px #c00;

   }

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

Правила:


Значениями свойства padding могут являться любые величины, определённые при помощи линейных единиц измерения, предусмотренных в CSS.

Это справедливо и для свойства margin, но в качестве значений последнего могут также выступать величины, заданные в процентах от ширины содержимого родительского элемента, а ещё ключевое слово auto, предписывающее использовать значение по умолчанию.

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

Ниже приводится пример на применение блочных CSS свойств:


<?xml version="1.0" encoding="windows-1251"?>

<!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" lang="ru" xml:lang="ru">

<head>

  <title>Применение блочных свойств CSS</title>

<style type="text/css">

<!--

html, body {

  margin: 0px;

  padding: 0px;

  border: 0px;

   }

body {

  color: #000;

   background: #fff;

   }

h1 {

  font: 120% Tahoma, Verdana, Arial, Helvetica, sans-serif;

  background: #f0f0f0;

  border-style: solid dotted;

  border-width: 3px 5px;

   border-color: #c00;

  padding: 5px 20px;

  margin: 20px;

   }

p {

  margin: 0px 20px 20px 100px;

   }

 -->

</style>

</head>

<body>

<h1>Блочная модель CSS2</h1>

<p>CSS2 предоставляет разработчикам вполне состоятельное средство, позволяющее организовать пространство веб-страницы в виде набора прямоугольных областей с различными свойствами — речь идет о так называемой блочной модели. Подошло время познакомиться с ней лицом к лицу.</p>

<p>Блочная модель наличествовала в CSS с самого начала, но в спецификации CSS2 она подверглась весьма существенным дополнениям и коррективам.</p>

<h1>Нюансы терминологии</h1>

<p>Название «блочная модель» не должно вводить в заблуждение — свойства, предопределенные ею, вполне применимы не только к блочным, но и к внутристрочным элементам. Путаница возникает исключительно по причине особенностей перевода рекомендаций W3C на русский язык. Устоявшемуся русскоязычному названию «блочная модель» в англоязычной терминологии соответствует понятие box model, тогда как «блочный элемент» в оригинале — это block element.</p>

<p>Так или иначе, любой элемент HTML в визуальном представлении помимо непосредственного содержимого может иметь также поля, рамку и отступ.</p>

</body>

</html>

заголовки и параграфы

В данном примере принудительно установлены нулевые поля и отступы для элементов <html>...</html> и <body>...</body>, поскольку эти величины изначально не равны нулю, а бесконтрольно "плавают" от браузера к браузеру, что препятствует точному позиционированию элементов на странице.

Кроме этого, нижние отступы у абзацев, равно как и верхние отступы у заголовков, равны 20 пикселям, но эти величины не складываются, отступы перекрываются (collapsing).

Линейные размеры элементов

Размеры элементов по умолчанию определяются контекстом форматирования: в зависимости от того блочным или внутристрочным является данный элемент, применяются различные алгоритмы вычисления его линейных размеров.

Так, линейные размеры блочного элемента по умолчанию определяются шириной родительского элемента (по горизонтали) и объёмом содержимого (по вертикали), а также зависят от величины полей, отступов и толщины рамки. Так же размеры блочных элементов можно явно задавать при помощи CSS-свойств width и height, определяющих соответственно ширину и высоту содержимого.

Значениями этих свойств могут быть величины, заданные с использованием линейных единиц измерения или в процентах, а также ключевое слово auto. Значение auto, используемое по умолчанию, предписывает вычислять высоту или ширину содержимого блочного элемента с учётом значений других свойств, влияющих на линейные рамеры элемента.

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

При этом возникает сложность "увязки" высот соседних блоков между собой, если параметр heigth не задан жёско (в пикселях или иных линейных единицах), что при произвольном количестве контекста в блоках совершенно не приемлимо. Для сайтов, сверстанных с применением блочной модели CSS характерно контролируемое развитие по горизонтали в сочетании со "стихийным" развитием по вертикали.

Вот типичный <div> блок, которому присвоен класс "boxtest". Блок имеет границу в 20 px , отступ в 30 px и ширину в 300 px.


div.boxtest {

  border:20px solid;

  padding:30px;

  background: #ffc;

  width:300px;

   }

Общая ширина блока, включая все границы и отступы, должна составлять 400px: 20+30+300+30+20 = 400. Браузеры, неверно интерпретирующие блочную модель из спецификации CSS1, поместят отступы и границы внутри заданного интервала ширины, в результате общая ширина нашего блока будет равна всего лишь 300 px, а ширина содержимого - лишь 200 px: 300-20-30-30-20 = 200.

В целях обеспечения удобочитаемости CSS кода рекомендуется придерживаться некотороко естественного порядка следования правил. В самом начале листа стилей разумно определять правила для контейнеров <html>...</html> и <body>...</body>, т. е., фактически, общие для всей страницы в целом, а затем перечислять правила для функциональных областей страницы, причём желательно в той последовательности, в которой соответствующие элементы определяются в HTML-разметке.

Кроме этого свойства width и height могут быть использованы для демонстрации графического изображения в увеличенном масштабе, чаще всего в оформительских целях. Но хорошие результаты это даёт только в том случае, когда в значении свойств указаны величины, кратные реальным ширине и высоте растягиваемого изображения в пикселях. Ниже приводится пример использования свойств width и height для указания линейных размеров графического изображения:


<!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" lang="ru" xml:lang="ru">

<head>

  <title>Линейные размеры изображений</title>

</head>

<body>

<p>Реальные размеры картинки:</p>

<p><img src="ball.png" alt="Шар с игрой света и тени" style="width: 156px; height: 114px; border: solid 1px #ccc" /></p>

<p>Увеличение линейных размеров втрое:</p>

<p><img src="ball.png" alt="Шар с игрой света и тени" style="width: 468px; height: 342px; border: solid 1px #ccc" /></p>

<p>Растяжение линейного градиента в одном направлении:</p>

<p><img src="grad.gif" alt="Линейный градиент" style="width: 600px; height: 20px; border: none" /></p>

</body>

</html>

изменение линейных размеров

Селекторы классов и уникальных элементов

Функциональные области веб-страниц обычно определяются при помощи семантически нейтральных элементов <div>...</div>. Для страницы, включающей в себя "шапку", блок навигации, область основного текста и "подвал", таким образом, понадобится как минимум четыре таких элемента. Если использовать правило div{ } в листе стилей, связанном с веб-страницей, то это сделает оформление всех элементов <div>...</div> совершенно одинаковыми. Использование же атрибута style также не решит проблемы. Поэтому вместо атрибута style нужно использоваль атрибуты id и class.

При помощи атрибута id можно назначить тому или иному элементу уникальный идентификатор. Например, именем header назовём элемент, описывающий шапку, блоку навигации присвоим идентификатор menu, область основного текста будем именовать text, и наконец, имя footer назначим "подвалу":


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

<div id="menu">...</div>

<div id="text">...</div>

<div id="footer">...</div>

Атрибут class нужен, в сущности для тех же самых целей, но лишь с тем отличием, что одно и тоже значение данного атрибута может быть присвоено нескольким элементам.

После этого в листе стилей, относящемся к данной странице, можно использовать правила следующего толка:


div#header (...) — определяет представление элемента <div id="header">...</div>

#header (...) — применяется к элементу, заданному любым тегом, дополненым атрибутом id со значением header.

p.comment — задаёт оформление абзацев, определённых тегами <p class="comment">...</p>.

.picture (...) — используется для любых элементов, для которых при помощи HTML-разметки определён атрибут class со значением picture.

Такой синтаксис напоминает синтаксис объектно-ориентированных языков программирования, где название свойства и метода объекта отделяются от имени объекта точкой. Например, если мы хотим, чтобы некоторые абзацы были синего цвета, надо в HTML коде присвоить им некоторый класс, а в таблице стилей определить этот класс.

<p class="bl">Цвет этого абзаца и всех других абзацев этого класса будет синим.</p>


В таблице стилей следует написать такое правило, где в качестве селектора будет использоваться название элемента p и через (.) от него имя класса:

 p.bl{

  color: blue;

   }

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

 .redd{

  color: red;

   }

При зтом перед именем класса можно не указывать название элемента. Тогда "пустота" в начале как бы обозначает любой элемент. Далее можно написать такой код:

<h1 class="redd">Красный заголовок первого уровня<h1>

<p class="redd">Текст абзаца тоже будет красным<p>


В HTML можно применять форматирование только к тем элементам, для которых существуют соответствующие конструкции, например, в HTML нет элемента, который соответствовал бы первой строке абзаца или первой букве абзаца. Для этого в CSS было введено понятие псевдоэлемента. Приставка псевдо в данном случае означает, что с точки зрения HTML такого элемента не существует, но он существует на HTML странице и его можно использовать в качестве селектора для написания CSS правила. CSS1 поддерживает два псевдоэлемента first-letter и first-line. Первый из них позволяет создавать буквицы. Имя псевдоэлемента пишется через двоеточие от имени элемента, внутри которого следует использовать этот псевдоэлемент. Если нужно, чтобы текст обтекал первую букву, то надо задать свойство float-left, в этом случае буква будет прижата к левому краю страницы, а текст будет её обтекать. Подключив следующий фрагмент к таблице стилей мы получим первую букву каждого абзаца крупной, полужирной, синего цвета, обтекаемой основным текстом:


 p:first-letter{

  color: blue;

  font: bold 24pt Verdana, sans-serif;

  float-left;

   }

Чтобы первая строка каждого абзаца, например, была написана курсивом надо в таблице стилей записать следующее правило:


 p:first-line{

  font-style: italic;

   }

Следующий пример демонстрирует использование классов и идентификаторов элементов:


<?xml version="1.0" encoding="windows-1251"?>

<!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" lang="ru" xml:lang="ru">

<head>

  <title>Селекторы классов и идентификаторов</title>

<style type="text/css">

<!--

html, body {

   margin: 0px;

  padding: 0px;

  border: 0px;

   }

body {

  color: #000;

  background: #fff;

   }

#header {

  background: #f0f0f0;

  border-bottom: dashed 2px #c00;

  padding: 20px;

   }

#text {

  border: solid 1px #ccc;

  margin: 20px;

  padding: 20px;

   }

.comment {

  font-size: 80%;

  margin-left: 50px;

   }

-->

</style>

</head>

<body>

 <div id="header">Это область «шапки».</div>

 <div id="text">

  <p>А это — абзац основного текста.</p>

  <p>И еще один абзац основного текста.</p>

  <p class="comment">Абзац примечания.</p>

  <p>Опять абзац основного текста.</p>

  <p class="comment">И снова абзац примечания.</p>

 </div>

</body>

</html>

использование селекторов

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


h1, h2, h6, p {color: blue}

Если совпадение описаний имеет место только по некоторым свойствам, то лучше такие правила не объединять. В этом случае ухудшается логичность построения таблицы стилей. Хорошим примером группировки можно назвать тот случай, когда, например, стили обычных и активных ссылок одинаковы:


 a:link, a:active {

  color: green;

  text-decoration: none;

   }

Псевдоклассы можно использовать в комбинации с обычными классами и идентификаторами:


<a class="padelink" href="page.html">текст ссылки</a>

  a.pagelink: hover {

  ... задание стиля...

   }

Для случая с идентификаторами можно привести такой пример:


<a id="milink" href="page.html">текст ссылки</a>

  a#milink:visited {

  ... задание стиля...

   }

Виды блоков — свойство display

В CSS имеется обширный инструментарий, позволяющий не только создавать блоки на основе любых элементов HTML, но и точно позиционировать их на экране. Формирование страницы при помощи средств CSS сводится к следующему:

  1. создаётся блок и задаются его параметы;
  2. вновь созданный блок размешается (позиционируется) на странице.

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

Поведение каждого блока зависит от его типа, который задаётся свойством display. Свойство display в спецификации CSS1 позволяет задать только четыре значения: none, inline, blok и list-item. В спецификации CSS2 их намного больше, но далеко не все они поддерживаются браузерами, поэтому часто приходится ограничиваться блоками, описанными в CSS1.

Значение none отключает отображение блока в окне браузера, как будто его никогда не было в коде страницы. Это может понадобиться, например, когда на сайте разграничиваются права посетителей. Если это зарегистрированный пользователь, то выводится блок информации о каких-нибудь мероприятиях, если это гость, то для него другая информация. С помощью какого-то языка программирования, или языка сценариев JavaScript можно удалить или добавить свойство display:none для блока с той или иной информацией. Когда новый посетитель зарегистрировался, свойство display вновь может принять значение blok, и скрытая ранее информация будет отображена.

Ещё один пример использование свойства display:none — создание раскрывающихся меню. В отдельных блоках создаётся перечень команд подменю для каждого из пунктов меню, для каждого их этих блоков задаётся свойство display:none, т.е. исходно они не будут видны. Затем, когда пользователь щёлкнет по команде меню, для блока его подменю включается новое свойство display:blok, и подменю выводитя на экран. Если пользователь повторно щёлкнет на команде меню, его подменю закрывается.

Первый случай использования свойства display:blok мы уже назвали: это восстановление видимости блока, объявленного как display:none. Второй случай, когда это может пригодиться, — создание оригинального навигационного меню из ссылок, каждая из которых будет отдельным структурным блоком.

Значение inline определяет строчный блок. Многие элементы HTML имеют такое свойство display по умолчанию, например, span, cite, em. На практике это значение может быть полезно в тех случаях, когда необходимо преобразовать структурный блок в строчный. Заголовки h1 — h6 образуют структурные элементы, и если в HTML-документе записать сначала заголовок, а потом некий текст, то текст будет обязательно начинаться с новой строки. Если нужно, чтобы они были на одной строке, то в таблице стилей надо написать:

  h4{display:inline}

  p{display:inline}, а в HTML-документе следующий код:


  <h4>Заголовок</h4>

  <p>Фрагмент текста, который следует непосредственно за заголовком, в той же строке</p>

С помощью значения list-item элемент становится частью списка. По умолчанию это значение установлено для трёх элементов ol, ul, li. К другим же элементам свойство list-style может быть применено, если свойство display для них установлено list-item.

В спецификации CSS2 есть несколько свойств, позволяющих управлять блоками, в частности их видимостью и поведением при переполнении, когда размеры содержимого блока превышают размеры самого блока. Отображением содержимого можно управлять при помощи свойства overflow. Значением этого свойства по умолчанию является ключевое слово auto. Помимо него возможны также следующие значения:

Ряд браузеров поддерживает нестандартные свойства overflow-x и overflow-y, которые позволяют определять алгоритм отображения содержимого раздельно по вертикали и горизонтали. Ниже приводится пример некорректно интерпретируемый браузером Interner Explorer, пример блочного элемента, использующего значение visible свойства overflow:


<!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" lang="ru" xml:lang="ru">

<head>

  <title>Переполнение контейнера</title>

</head>

<body>

<p style="width: 200px; height: 200px; background: #f0f0f0; border: dashed 2px #c00; padding: 10px; overflow: visible">Несмотря на то, что компания Microsoft явилась родоначальником безусловно полезных свойств <span style="white-space: nowrap">overflow-x</span> и <span style="white-space: nowrap">overflow-y,</span> ее браузер пока что с трудом управляется со стандартным свойством overflow. Internet Explorer интерпретирует значение visible таким образом, что размер блока подстраивается под объем содержимого, что с точки зрения спецификации CSS2 некорректно.</p>

</body>

</html>

переполнение контейнера

Виды позиционирования

CSS2 предусматривакт четыре типа позиционирования, определяемых при помощи свойства position со следующими значениями:


Для смещения элемента в большинстве случаев бывает достаточно двух свойств, например:

#menu {top: 100px: left: 20px}


Значениями свойств top, bottom, left и right могут быть величины, заданные при помощи линейных единиц измерения, в процентах, относительно высоты или ширины родительского элемента, а также ключевое слово auto, используемое по умолчанию.

Ниже приводится пример двух абсолютно позиционированных блока:


<!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" lang="ru" xml:lang="ru">

<head>

  <title>Два абсолютно позиционированных блока</title>

<style type="text/css">

<!--

 html, body {

   margin: 0px;

   padding: 0px;

  border: 0px;

   }

body {

  color: #000;

  background: #fff;

   }

 div {

  position: absolute;

  width: 150px;

  height: 150px;

  padding: 20px;

  border: dashed 3px;

   }

 #first {

  top: 50px;

  left: 50px;

  background: #ccf0ff;

  border-color: #0cf;

   }

 #second {

  top: 150px;

  left: 150px;

  background: #fff0cc;

   }

 -->

</style>

</head>

body>

 <div id="first">Первый блок</div>

 <div id="second">Второй блок</div>

</body>

</html>

абсолютно позиционированные блоки

При верстке шаблонов страниц так же используется ещё один алгоритм управления взаимным размешением блочных элементов. Режим обтекания регулируется двумя CSS свойствами: float и clear. Первое свойство определяет, с какой стороны будет располагаться обтекаемый элемент по отношению к обтекающим – слева или справа соответственно. Ключевое слово none (значение по умолчанию) отменяет действие свойства float. Свойство clear запрещает расположение обтекаемых блоков с той или иной стороны от данного элемента. Оно может принимать значение both ( в этом случае обтекаемые элементы запрещены с обоих сторон от данного элемента). Значение по умолчанию – none напротив, разрешает размещение обтекаемых блоков с любой стороны.

Ниже приводится пример на применение свойств float и clear.


<!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" lang="ru" xml:lang="ru">

<head>

  <title>Обтекаемые элементы</title>

</head>

<body>

<p><img src="ball.png" alt="Шар с игрой света и тени" style="width: 156px; height: 114px; border: solid 1px #ccc; margin: 0px 20px 20px 0px; float: left" />Текст этого абзаца обтекает изображение.</p>

<p>Текст этого абзаца тоже будет обтекать картинку.</p>

<p style="clear: left">А этот абзац уже не обтекает рисунок.</p>

<p>Ну а этот — и подавно.</p>

</body>

</html>

обтекаемые элементы

Верстка страницы в несколько колонок заставляет перейти от пассивной статической схемы позиционирования элементов к более сложным алгоритмам. Чаще всего при этом, так или иначе, используются обтекаемые элементы. При вертикальном меню навигации получается верстка страницы в несколько колонок.

Создавая блок в CSS мы чётко задаём его параметры, а также позиционируем его в определённое место на экране. Таким образом, любой блок имеет координаты x и y, которые определяют положение блока на плоскости экрана, но в CSS2 есть ещё и третья, пространственная координата z, которая определяет номер слоя, на котором находится блок. Слои в CSS в этом отношении очень похожи на слои графических редакторов. Фоном здесь служит основной код веб-страницы, а с помощью CSS можно какой-либо элемент вынести на отдельный слой. Сделать это можно с помощью свойства z-index. Принимаемые этим свойством значения указывают порядковый номер слоя. Слой с номером 1 находится непосредственно на основной странице, слой с номером 2 над первым и т.д.

Ниже приводится пример на применение свойства 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" lang="ru" xml:lang="ru">

<head>

<title>Применение свойства z-index</title>

<style type="text/css">

<!--

 html, body {

  margin: 0px;

  padding: 0px;

  border: 0px;

   }

 body {

  color: #000;

  background: #fff;

   }

 div {

   position: absolute;

  width: 150px;

  height: 150px;

  padding: 20px;

  border: dashed 3px;

   }

 #first {

  z-index: 2;

  top: 50px;

  left: 50px;

  background: #ccf0ff;

  border-color: #0cf;

   }

 #second {

  z-index: 1;

  top: 150px;

  left: 150px;

  background: #fff0cc;

  border-color: #fc0;

   }

-->

</style>

</head>

<body>

 <div id="first">Первый блок</div>

 <div id="second">Второй блок</div>

</body>

</html>

применение свойства z-index




Обновить страницу