Слои css – CSS верстка слоями – Несколько слоев div в одной строке, или как сверстать таблицу из слоев.

Содержание

Слои css. Позиционирование слоёв

Слои cssКонцепция слоя или уровня была разработана и впервые предложена компанией Netscape, их тэги <LAYER и <ILAYER> были во многом похожи на <FRAME> и <IFRAME>. Однако со временем им на замену пришло и практически полностью вытеснило оригинальное решение от Microsoft. Было предложено рассматривать отдельные блоки текста, в тэгах <SPAN> или <DIV> как слои, организовав управление ими при помощи их свойств.

Применение слоев позволяет создать на странице некоторое подобие трехмерного пространства, хотя на самом деле это лишь плоские слои с заданным порядком перекрытия, как в колоде карт. При помощи таблиц стилей CSS мы можем задавать различные свойства слоям и позиционировать их. Это открывает перед web-мастером массу возможностей, позволяет создавать страницы более похожими на типографские и позволяет, в большинстве случаев, отказаться от нежелательного использования таблиц для позиционирования содержимого.

  • Абсолютное позиционирование
  • Горизонтальное позиционирование
  • Вертикальное позиционирование
  • Задание высоты слоя
  • Задание ширины слоя
  • Позиционирование в глубину
  • Управление видимостью
  • Понятие прозрачности слоя
  • Наложение слоев
  • Примеры работы со слоями

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

Как и любое другое свойство, свойство Position задается при помощи таблиц стилей CSS.
Синтаксис: {position: absolute}
Оно может принимать следующие значения:

  • position:absolute означает, что позиционирование слоя будет происходить относительно левого верхнего угла страницы.
  • position:relative означает, что позиционирование слоя будет происходить относительно того места, где в исходном тексте он находится, то есть относительно предыдущего элемента.
  • position:static означает, что позиционирование слоя будет происходить относительно фона.

Горизонтальное позиционирование

Позиционирование по горизонтали задается свойством left, путем задания отступа по оси X левого верхнего угла слоя относительно точки отсчета, которая определяется свойством

Position
Синтаксис: {left: значение}
задается:

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

Позиционирование по вертикали задается свойством top, атрибут позволяет задать Y-координату левого верхнего угла слоя относительно точки отсчета, которая определяется свойством Position
Синтаксис: {top: значение}
задается:

Задание высоты слоя

height,  это свойство позволяет задать высоту слоя в окне браузера:
Синтаксис: {height: значение}
задается:

Задание ширины слоя

width,  это свойство позволяет задать ширину слоя в окне браузера:
Синтаксис: {width: значение}
задается:

Позиционирование в глубину

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

  • auto
  • порядковый номер

Управление видимостью

visibility, это свойство позволяет задать видимость слоя, присвоив ему одно из значений:
Синтаксис: {visibility: inherit}

display, это свойство позволяет задать видимость слоя, визуально отличается от visibility тем, что сдвигает предыдущий и последующий слои вместе:
Синтаксис: {display: none}

  • inline
  • list-item
  • none
  • block

При кажущемся сходстве свойств слоя visibility и display работают они по разному.
Пример: | убрать | поставить | или | скрыть | показать | слой

overflow, это свойство позволяет задать, как выглядит текст, переполнивший границы слоя, присвоив ему одно из значений:
Синтаксис: {overflow: none}

Понятие прозрачности слоя

Поскольку слой на самом деле представляет собой блок содержимого, заключенный в тэгах <SPAN> или <DIV>, то при помощи таблиц стилей CSS можно отформатировать его любым из доступных способов: наложить фильтр, задать фоновый цвет или рисунок, задать стили включенным тэгам. Тогда, если слой не будет иметь фоновый цвет или рисунок мы сможем увидеть сквозь него содержимое того слоя, над которым он позиционирован, подобного можно достичь, вставив рисунок

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

Наложение слоев

Одно из самых интересных способов применений свойств слоя, является одновременное оперирование позиционированием сразу для двух слоев и более. Задав в каждом слое свойствам Position значение absolute и варьируя значения свойств left, top, height, width и z-index мы получим интересный эффект наложения слоев друг на друга, частичного или полного перекрытия содержимого.

Примеры работы со слоями

Наложение прозрачного слоя, эффект тени

<html>
<head>
<style type=»text/css»>
body {font-family: Verdana; font-size: 30pt; font-weight: bold;}
.d1 { position: absolute; color: silver; top: 10%; left: 10%; }

.d2 { position: absolute; color: navy; top: 9%; left: 9%; }
</style>
</head>
<body>
<div class=»d1″>Учебник HTML</div>
<div class=»d2″>Учебник HTML</div>
</body>
</html>

Пример

Позиционирование без таблицы

<html>
<head>
<style type=»text/css»>
body {font-family: Verdana; font-size: 100%; color: navy;}
.d1 { position: absolute; top: 5%; left: 5%; }
.d2 { position: absolute; top: 5%; left: 45%; }
.d3 { position: absolute; top: 5%; left: 85%; }
.d4 { position: absolute; top: 45%; left: 5%; }
.d5 { position: absolute; top: 45%; left: 45%; }
.d6 { position: absolute; top: 45%; left: 85%; }
.d7 { position: absolute; top: 85%; left: 5%; }
.d8 { position: absolute; top: 85%; left: 45%; }
.d9 { position: absolute; top: 85%; left: 85%; }
</style>
</head>
<body>
<div class=»d1″>Ячейка1</div>
<div class=»d2″>Ячейка2</div>
<div class=»d3″>Ячейка3</div>
<div class=»d4″>Ячейка4</div>
<div class=»d5″>Ячейка5</div>

<div class=»d6″>Ячейка6</div>
<div class=»d7″>Ячейка7</div>
<div class=»d8″>Ячейка8</div>
<div class=»d9″>Ячейка9</div>
</body>
</html>

Пример

Декоративное оформление страницы

<html>
<head>
<style type=»text/css»>
body {font-family: Verdana; font-size: 100%; font-weight: bold;}
.d1 { position: absolute;
font-size: 1000%;
color: #ffccff;
top: 10%;
left: 10%;
width: 70%;}
.d2 { position: absolute;
font-size:450%;
color: #ccffff;
top:150;
left: 20%;
width: 60%;}
.d3 { position: absolute;
font-size: 100%;
color: navy;
top: 10%;
left: 25%;
width: 35%;}
b { font-size: 100%; color: #0088bb}
i {color: #0088bb }
</style>
</head>
<body>
<div class=»d1″>HTML</div>
<div class=»d2″>Учебник</div>
<div class=»d3″>
<p>Данный <b>учебник HTML</b> и <b>CSS</b> поможет начинающему пользователю, шаг за шагом, от начала и до конца создать свою собственную страницу в интернете, <b>WEB-узел</b> или их локальную версию на <b>CD</b>, а также может послужить <b>on-line</b>  справочником для более продвинутых <i>юзеров</i>.

Не стоит ждать от сайта абсолютно исчерпывающего объёма информации, однако
он будет <b>регулярно</b> обновляться и пополняться материалами.
</p>
</div>
</body>
</html>

Слои в CSS. Свойство z-index

Слои в CSS. Свойство z-index

В этом уроке я расскажу об интересной возможности создания слоев в CSS.
Попробую объяснить, что такое слой. Уверен, все вы хотя бы раз в жизни делали аппликации из бумаги. К примеру, первый слой – небо, на небе вторым слоем солнышко, третьим слоем тучка. Вот это и есть те же самые слои в CSS. Тот, кто работал с аппликациями или в графическом редакторе Photoshop, CorelDRAW, меня поймут. А тех, кто все еще меня не понял, очень прошу проявить еще капельку терпения и посмотреть всё ниже на примерах.

Итак, чтобы создать слой в CSS воспользуйтесь свойством

Z-index.
Слои нумеруются цифрами. Начинается слой с цифры 1, остальные слои идут по возрастанию и будут накрывать нижние.

z-index: 1;

Слои в CSS. Свойство z-index

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


<div>1-ый блок</div>
<div>2-ой блок</div> 
<div>3-ий блок</div>
<div>4-ый блок</div>

1-ый блок будет первым слоем. Присвоим ему z-index: 1.
2-ый блок будет вторым слоем. Присвоим ему z-index: 2.
3-ый блок будет третьим слоем. Присвоим ему z-index: 3.
4-ый блок будет четвертым слоем. Присвоим ему z-index: 4.

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

Пример:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
 <title>Блок в css</title>
 <style ENGINE="text/css">
 .blok1 {
border:1px solid #000;
background: #ccc;
width:80px;
height:150px;
position: absolute;
padding:10px;
left: 200px;
top: 200px;
z-index: 1;
}
.blok2 {
border:1px solid #000;
background: #ccc;
width:80px;
height:150px;
position: absolute;
padding:10px;
left: 215px;
top: 230px;
z-index: 2;
}
.blok3 {
border:1px solid #000;
background: #ccc;
width:80px;
height:150px;
position: absolute;
padding:10px;
left: 230px;
top: 260px;
z-index: 3;
}
.blok4 {
border:1px solid #000;
background: #ccc;
width:80px;
height:150px;
position: absolute;
padding:10px;
left: 245px;
top: 290px;
z-index: 4;
}
 </style>
 </head>
 <body>
<div>1-ый блок</div>
<div>2-ой блок</div> 
<div>3-ий блок</div>
<div>4-ый блок</div>
 </body>
</html>

Результат:

Слои в CSS. Свойство z-index

Вот и все. Я думаю, вы поняли и во всем разобрались. Если будут вопросы, пишите в комментариях, отвечу.

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓


Последние новости категории:

Похожие статьи

Популярные статьи:

Добавить комментарий

Метки: css, основы

Фиксированный дизайн. Наложение слоев | htmlbook.ru

Основная особенность слоев и их основное отличие в использовании от других способов верстки — точное позиционирование и способность накладываться друг на друга. Благодаря этой особенности с помощью слоев можно создавать разные эффекты на веб-странице.

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

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

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

При использовании наложения требуется присвоить свойству position значение absolute. Само положение слоя регулируется свойствами left, top, right и bottom которые задают координаты соответственно от левого, верхнего, правого и нижнего края (пример 1). Поскольку вывод содержимого слоя осуществляется в заданное место, то порядок описания слоев указывает и порядок их наложения друг на друга. Самый первый слой, приведенный в коде веб-страницы, будет располагаться на заднем плане, а самый последний — на переднем. Порядок также можно менять с помощью свойства z-index. Чем больше его значение, тем выше располагается текущий слой относительно других слоев.

Пример 1. Абсолютное позиционирование

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  <html>
  <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <title>Позиционирование</title>
   <style type="text/css"> 
    #rightcol {
     position: absolute; /* Абсолютное позиционирование */
     left: 350px; /* Положение левого края */
     top: 50px; /* Положение верхнего края */
     width: 120px; /* Ширина слоя */
     background: #e0e0e0; /* Цвет фона */
     border: solid 1px #000; /* Параметры рамки */
    }
    #leftcol {
     position: absolute; /* Абсолютное позиционирование */
     left: 0; /* Положение левого края */
     top: 0; /* Положение верхнего края */
     width: 400px; /* Ширина слоя */
     background: #800000; /* Цвет фона */
     color: white; /* Цвет текста */
    }
   </style>
  </head>
  <body>
   <div>Левая колонка</div>
   <div>Правая колонка</div>
 </body>
</html>

В данном примере положение слоя с именем leftcol устанавливается в левом верхнем углу окна браузера, а слой rightcol смещен на 350 пикселов вправо от левого края окна и на 50 пикселов вниз. Заметьте, что значения left и top следует указывать обязательно для всех слоев, чтобы получилось нужное наложение с заданными координатами.

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

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

Чтобы наложить один слой на другой и не привязываться жестко к координатной сетке, можно попробовать следующий подход. Для первого слоя, который будет располагаться на заднем плане, указываем абсолютное позиционирование, присваивая свойству position значение absolute. Второй слой, расположенный поверх первого, должен иметь относительное позиционирование, что достигается с помощью значения relative у свойства position. Положение верхнего слоя определяется от левого верхнего угла нижнего слоя заданием left и top (рис. 1).

Рис 1. Задание положения верхнего слоя

В примере 2 ширина слоев задается свойством width, а местоположение верхнего слоя (он называется rightcol) свойствами left и top. Как указывалось выше, порядок наложения слоев определяется их порядком описания в коде или с помощью z-index. Поэтому слой с именем leftcol будет располагаться на заднем плане, поскольку он определен самым первым.

Пример 2. Относительное позиционирование

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Позиционирование</title>
  <style type="text/css"> 
   #leftcol {
    position: absolute; /* Абсолютное позиционирование */
    width: 550px; /* Ширина левой колонки */
    background: #e0e0e0; /* Цвет фона содержимого */
    padding: 10px /* Поля вокруг текста */
   }
   #rightcol { /* Этот слой накладывается поверх */ 
    position: relative; /* Относительное позиционирование */
    left: 500px; /* Положение от левого края */
    top: 20px; /* Положение от верхнего края */
    width: 200px; /* Ширина правой колонки */
    background: #800000; /* Цвет фона */
    color: #fff; /* Цвет текста */
   }
  </style>
 </head>
 <body>
  <div>Левая колонка</div>
  <div>Правая колонка</div>
 </body>
</html>

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

Универсальный подход

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

Реализуется это следующим способом. У каждого слоя необходимо указать конструкцию float: left, которая позволяет один слой пристыковать к другому справа. Добавлять float следует для каждого слоя, иначе в некоторых браузерах появится промежуток между слоями.

Теперь слои располагаются рядом, и прежде, чем указывать координаты, задаем относительное позиционирование значением relative у свойства position. Положение верхнего слоя управляется значением left и top. Но поскольку отсчет координат в данном случае ведется от левого верхнего угла второго слоя, по горизонтали нужно указывать отрицательное значение (рис. 2). Впрочем, можно использовать также свойство bottom.

Рис. 2. Задание положения верхнего слоя

В примере 3 верхний слой с именем rightcol смещается на 50 пикселов по горизонтали и вертикали. Чтобы он не закрывал при наложении содержимое слоя leftcol, справа у текста делается отступ через свойство padding-right.

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

Пример 3. Создание наложения слоев

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Позиционирование</title>
  <style type="text/css"> 
   #leftcol {
    position: relative; /* Относительное позиционирование */
    float: left; /* Совмещение колонок по горизонтали */
    width: 400px; /* Ширина слоя */
    background: #800000; /* Цвет фона */
    color: white; /* Цвет текста */
   }
   #rightcol {
    position: relative; /* Относительное позиционирование */
    float: left; /* Совмещение колонок по горизонтали */
    left: -50px; /* Сдвиг слоя влево */
    top: 50px; /* Смещение слоя вниз */
    width: 120px; /* Ширина слоя */
    background: #e0e0e0; /* Цвет фона */
    border: solid 1px black; /* Параметры рамки */
   }
   #leftcol P {
    padding: 10px; /* Поля вокруг текста */
    padding-right: 50px; /* Значение поля справа */
    margin: 0; /* Обнуляем значения отступов */
   }
   #rightcol P {
    padding: 10px; /* Поля вокруг текста */
    padding-top: 0 /* Значение поля сверху */
   }
  </style>
 </head>
 <body>
  <div>
   <p>Левая колонка </p>
  </div>
  <div>
   <p>Правая колонка</p>
  </div>
 </body>
</html>

Результат данного примера с другим текстом приведен ниже (рис. 3).

Рис. 3. Результат действия примера

Верстка с помощью слоев | htmlbook.ru

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

Первоначально слои ввела компания Netscape, включив в свой браузер поддержку тега <layer>. Этот тег позволял прятать/показывать текущее содержимое, устанавливать положение относительно окна браузера, накладывать один слой поверх других и загружать данные в содержимое слоя из файла. Что характерно, все эти параметры легко менялись с помощью JavaScript и это расширяло возможности по созданию действительно динамического контента на странице. Несмотря на столь впечатляющий набор возможностей, тег <layer> не был включен в спецификацию HTML и так и остался лишь расширением браузера Netscape.

Однако необходимость в указанных возможностях, которые бы применялись на сайтах, уже назрела, и в конце 1996 года синтаксис для работы со слоями был разработан и одобрен в рабочем проекте консорциума «CSS Positioning (CSS-P)». Основная нагрузка ложилась на стили, с их помощью можно управлять видом любого элемента, в том числе менять значения динамически через JavaScript. К сожалению, объектные модели браузеров для доступа к элементам разнились, поэтому приходилось писать достаточно сложный код, который бы учитывал эти различия.

В настоящее время разработчики популярных браузеров стали придерживаться спецификаций HTML и CSS, что сильно облегчило жизнь создателям сайтов, поскольку снизило время на отладку сайта в разных браузерах. Тем не менее, различия в подходах у браузеров существуют и при их возникновении разработчики придерживаются следующих форм работы.

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

Хак — это набор приемов, когда определенному браузеру «подсовывают» код, который понимается только этим браузером, а остальными игнорируется.

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

Есть и другой, перспективный путь — придерживаться спецификации CSS. Несмотря на то, что браузеры не в полной мере сами ее поддерживают, они прогрессируют именно в этом направлении. А именно, полной поддержки различных спецификаций (HTML, CSS, DOM). Таким образом, получается, что будущие версии браузеров будут унифицированы и один и тот же сайт станут отображать корректно.

Снова вернемся к слоям. Понятно, что они непосредственно связаны со стилями. Раз так, то не получается ли, что каждый элемент HTML-кода, к которому добавляются стили, является слоем? В каком-то смысле так и есть. Однако это внесло бы изрядную путаницу, если вместо «таблица» или «параграф» мы бы говорили «слой». Поэтому договоримся относить этот термин только к тегам <div>.

Слой — это элемент веб-страницы, созданный с помощью тега <div>, к которому применяется стилевое оформление.

Таким образом, верстка с помощью слоев заключается в конструктивном использовании тегов <div> и стилей. При этом придерживаются следующих принципов.

Разделение содержимого и оформления

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

Активное применение тега <div>

При использовании слоев существенное значение уделяется универсальному тегу <div>, который выполняет множество функций. Фактически это основа, на которую «навешиваются» стили, превращая ее то в игрушку, то в зверушку. Совершенно не значит, что применяется только один этот тег, нужно ведь и рисунки вставлять и оформлять текст. Но при верстке с помощью слоев тег <div> является кирпичиком верстки, ее базовым фундаментом.

Благодаря этому тегу HTML-код распадается на ряд четких наглядных блоков, за счет чего верстка слоями называется также блочной версткой. Код при этом получается более компактным, чем при табличной верстке, к тому же поисковые системы его лучше индексируют.

Таблицы применяются только для представления табличных данных

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

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

Резюме

Слой — это базовый элемент верстки веб-страниц, при которой активно применяются стили и придерживаются спецификаций HTML и CSS. При таком подходе важная роль уделяется тегу <div>, с которым у большинства людей и ассоциируются слои. В каком-то смысле это является верным, поэтому договоримся в дальнейшем употреблять термин «слой» к тегу <div>, для которого указан стилевой идентификатор или класс. Таким образом, выражение «слой с именем content» подразумевает, что используется тег <div> или <div >.

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

Урок 15: Наслоение с помощью z-index (Слои)rustutorial

CSS оперирует в трёх измерениях - высота, ширина и глубина. Мы работали в двух измерениях на протяжении всех предшествующих уроков. В этом уроке мы научимся создавать слои/layers. Коротко говоря - упорядочивать элементы так, чтобы они перекрывались.

Для этого вы можете присвоит каждому элементу номер (z-index). Элемент с бóльшим номером перекрывает элемент с меньшим номером.

Скажем, мы играем в покер и у нас - royal flush. Наша "рука" должна быть представлена так, чтобы каждая карта имела z-index:

При этом номера идут подряд (1-5), но того же результата можно добиться и при использовании 5 различных номеров. Важна хронологическая последовательность номеров (порядок).

Вот код примера с картами:


	#ten_of_diamonds {
	position: absolute;
	left: 100px;
	top: 100px;
	z-index: 1;
	}

	#jack_of_diamonds {
	position: absolute;
	left: 115px;
	top: 115px;
	z-index: 2;
	}

	#queen_of_diamonds {
	position: absolute;
	left: 130px;
	top: 130px;
	z-index: 3;
	}

	#king_of_diamonds {
	position: absolute;
	left: 145px;
	top: 145px;
	z-index: 4;
	}

	#ace_of_diamonds {
	position: absolute;
	left: 160px;
	top: 160px;
	z-index: 5;
	}
	
	

Это относительно простой метод, но в нём заложены большие возможности. Вы можете размещать текст над изображением, изображение над текстом и т. д.

Резюме

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



<< Урок 14: Позиционирование элементов

Урок 16: Web-стандарты и проверка кода >>

Создание HTML Слоёв


CSS дает возможность работы со слоями: фрагментами HTML, которые можно размещать на веб-странице путем наложения их друг на друга с точностью до пиксела. Синтаксис для работы со слоями разработан и одобрен в конце 1996 года в рабочем проекте консорциума "CSS Positioning (CSS-P)" Данный проект для позиционирования элементов практически одинаково поддерживается браузерами Internet Explorer 4.0 и Netscape 4.0 за исключением ряда мелких отличий. Однако объектные модели браузеров для динамического управления слоями с помощью JavaScript отличаются. В этом и кроется основная проблема для веб-разработчиков, которые используют слои в своих программах.


Основы

Слой 1 наверху

Слой 1

Слой 2

Слой 2 наверху

Слой 1

Слой 2

Код HTML для примера показан ниже.

Пример 1. Создание слоев


<html>
<body>
Слой 1 наверху
<div>Слой 1</div>
<div>Слой 2</div>
Слой 2 наверху
<div>Слой 1</div>
<div>Слой 2</div>
</body>
</html>

Для создания слоев следует использовать тег DIV или SPAN. Эти теги взаимозаменяемы и различаются лишь внешним видом в браузере. Если требуются отступы до и после текста, следует использовать элемент DIV. При размещении текста внутри параграфа применяется тег SPAN.

Тип позиционирования определяется параметром position, положение элемента двумя координатами top и left, а порядок слоя значением z-index.


Позиционирование слоя

Свойство position может принимать одно из трех значений: static (статическое), absolute (абсолютное) и relative (относительное). Параметр static по умолчанию не оказывает никакого влияния на расположение слоев.

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

Кроме тегов DIV и SPAN абсолютное позиционирование поддерживают следующие элементы:
APPLET, INPUT, BUTTON, OBJECT, SELECT, FIELDSET, IFRAME, TABLE, IMG, TEXTAREA.

Параметр position: relative используется для смещения слоя относительно родительского элемента. Установка этого значения не изменяет размещение элемента, но если установлены значения свойств top или left, то слой смещается от своего нормального положения в документе.


Положение слоя

В то время как свойство position указывает тип системы координат, параметры top и left определяют точную позицию слоя. Значения этих параметров могут определяться в процентном отношении или пикселах, принимать положительные и отрицательные величины. Это дает возможность размещать контент выше или ниже на странице независимо от физической позиции кода HTML. То есть, в верхней части страницы можно поместить слой, который описан внизу HTML-документа.

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


Свойство z-index

Свойство z-index определяет порядок слоев, или их перекрытие по отношению к другим слоям. По умолчанию все слои позиционированы со значением z-index равным нулю. Другие слои могут размещаться ниже путем установки отрицательного значения z-index (рис. 1). Для слоев, у которых z-index не установлен, это значение назначается неявно в соответствии с их положением в документе. Поэтому слой, который помещен в документ позже, размещается выше остальных элементов, позиционированных ранее.

Рис. 1. Расположение слоев

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


Свойство visibility

Для отображения или скрытия слоя используется параметр visibility. Он может принимать значения visible, установленное по умолчанию, для показа слоя, и hidden, которое его прячет.

<div>Спрятанный слой</div>

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


Слои в HTML |

Слои

Слои в HTML Слои в HTMLВот такой эффект можно получить, используя слои. Собственно, точно такого же эффекта можно достичь и одним из множества фильтров Ехплорера, но второе решение будет отображаться правильно только в самом Ехплорере.
Итак, что же из себя представляет слой?
Код слоя:

<div>содержимое слоя</div>

id — это индивидуальное имя слоя, совпадать и повторяться оно не должно!
style — это вид слоя, то есть способ его отображения. Без этого параметра сам по себе тег div может служить лишь способом форматирования вложенного в него текста — без главных особенностей, присущих слоям — таких, как расположение поверх чего угодно.
left — расстояние от левого края: может быть как в пихелях, так и в процентах от общей ширины экрана.
top — расстояние от верха.
ну, ширина и высота вам уже известны, их не упоминаю.
z-index — значение может быть только цифрой. Причем, чем меньше эта цифра, тем выше находится слой по отношению к другим слоям.
Казалось бы, дизайн, построенный на слоях, намного удобнее и проще, чем дизайн на банальных таблицах, но есть нюансы, как положительные, так и отрицательные.
В числе положительных:

  •   удобство для дизайнера — большая свобода и больше эффектов.
  •   быстрее загрузка и не ждать закрытия замыкающего тега.
  •   удобнее манипулировать их содержимым

отрицательные стороны:

  •   сложно подстраиваться под меняющееся разрешение монитора. И еще сложнее   делать такой дизайн гибким — чтобы ширина слоя менялась сообразно ширине   окна. Это, конечно, можно сделать при помощи весьма громоздкого скрипта, но…   второе преимущество из списка положительного мы теряем.
  •   поисковики… многие последовательности тегов, как ни вопят владельцы   поисковых машин — а находятся хуже! Вывод — будь проще, и к тебе потянутся.

Слои в HTML

Такие вот пирожки-печенюшки..
Так и останутся слои элементом чисто декоративным и никак не основным. Зато при помощи слоев получаются приятные такие менюшки — в примерах скриптов вы сможете найти много таких примочек, пока же мы рассмотрим лишь основные параметры слоев, как таковых.

Дополнительные возможные теги:
background-color: цвет фона
layer-background-color: цвет слоя
border: 1px none — если убрать «ноне», то вокруг слоя появится бордюрчик 1 пихель толщиной.

У слоев есть много других тегов, но, как правило, они все предназначены для использования наряду со скриптами, поэтому в них мы пока зарываться не будем, а изучим следующую тему: каскадные таблицы стилей, оно же — CSS.

Отправить ответ

avatar
  Подписаться  
Уведомление о