Благодаря тому, что мы задаём внешнему элементу position: relative, а внутреннему position: absolute, один блок ложиться поверх другого. В качестве примера возьмём светлый и темный прямоугольник:
<style type="text/css"> .temnyi { background-color: #666; height: 150px; width:500px; } .svetlyi { background-color: #ccc; height: 50px; width: 250px; } </style> <div class="temnyi"> <div class="svetlyi"></div> </div>
Указав свойство position, мы не увидим изменений, но теперь светлый блок будет перемещаться в рамках тёмного благодаря свойствам left, top, right и bottom. Например, поместим светлый прямоугольник по центру тёмного
<style type="text/css"> .temnyi { background-color: #666; height: 150px; width:500px; position: relative;} .svetlyi {background-color: #ccc; height: 50px; width: 250px; position: absolute; left: 125px; top: 50px;} </style> <div class="temnyi"> <div class="svetlyi"></div> </div>
125px ↔
50px ↕
Вышеуказанные свойства могут принимать отрицательные значения. Тогда элемент выходит за границы тёмного прямоугольника.
<style type="text/css"> .temnyi { background-color: #666; height: 150px; width:500px; position: relative;} .svetlyi {background-color: #ccc; height: 50px; width: 250px; position: absolute; right: -125px; top: 50px;} </style> <div class="temnyi"> <div class="svetlyi"></div> </div>
125px ↔
position: absolute и position:relative
Поскольку HTML код веб-документа представляет из себя матрёшку, где один элемент находится внутри другого, то посмотрим на ситуацию в целом. Например, с четырьмя слоями. Точкой отсчёта для свойств top, bottom, right, left является граница родительского элемента с position не в значении static (по умолчанию).
<style type="text/css"> .temnyi2 { background-color: #222; padding: 25px 20px; display: inline-block; } .temnyi1 { background-color: #444; padding: 25px 20px; display: inline-block; } .temnyi { background-color: #666; height: 150px; width:500px; position: relative; } .svetlyi {background-color: #ccc; height: 50px; width: 250px; position: absolute; right: -125px; top: 0px;} </style> <body> ..... <div class="temnyi2"> <div class="temnyi1"> <div class="temnyi"> <div class="svetlyi"></div> </div> </div> </div> ..... </body>
position:relative;
position:relative;
position:relative;
position:relative;
position:relative;
Отрицательные значения смещают светлый блок на территорию другого контейнера. Но эту часть блока мы не увидим, коли будет добавлено свойство overflow: hidden.
Если же нужно показать только часть светлого блока, неравномерно убрав ненужные пиксели, то используется свойство clip: rect(вверх, вправо, вниз, влево); которое не применимо без position: absolute. auto показывает, что сторона остаётся без изменений.
position:relative;
clip: rect(auto, 200px, auto, 30px);
Взаимодействие блока с position: absolute с другими элементами
Мы можем в одном блоке разместить несколько элементов. Для удобства восприятия, не буду указывать попутные свойства.
<style type="text/css"> .temnyi {position: relative;} .svetlyi1 {} .svetlyi2 {} </style> <div class="temnyi"> <div class="svetlyi1">А</div> <div class="svetlyi2">Б</div> </div>
А
Б
Если блоку А присвоить position: absolute, то блок Б расположиться так, словно блока А не существует - он займёт его место. Блок А уже не сможет влиять на положение блока Б ни посредством float: left, ни своей площадью, словно он парит над ним.
<style type="text/css"> .temnyi {position: relative;} .svetlyi1 {position: absolute; left: 125px; top: 30px;} .svetlyi2 {} </style> <div class="temnyi"> <div class="svetlyi1">А</div> <div class="svetlyi2">Б</div> </div>
А
Б
Блок А перекрывает блок Б. Но стоит второму добавить position в значении relative, absolute или fixed, как ситуация измениться.
position: absolute;
position: relative;
position: absolute;
position: absolute;
Теперь приоритетным будет тот блок, который расположен ниже в коде, в данной случае белый Б. Для того, чтобы изменить естественный порядок, мы используем z-index. Чем больше значение этого параметра, тем выше находится элемент. Стоит помнить лишь то, что для position: static это свойство игнорируется (искл. свойство transform) и то, что в IE существует один изъян.
<div style="position: relative;"> <div style="position: absolute; left: 125px; top: 30px; z-index: 2;"> А </div> <div style="position: absolute; z-index: 1;"> Б </div> </div>
А
Б
Поскольку элементы не могут влиять на положение друг друга, то без указания для них значений (или если значения одинаковы) top, bottom, right, left, transform: translate и margin, ложатся друг поверх друга. А высота родительского блока, коли она не установлена фиксировано, равна нулю. На этом принципе основаны многие вещи, в том числе CSS табы.
<style type="text/css"> .temnyi {position: relative;} .svetlyi1 {position: absolute;} .svetlyi2 {position: absolute;} .temnyi:hover .svetlyi2 {display: none;} </style> <div class="temnyi"> <div class="svetlyi1">А</div> <div class="svetlyi2">Б</div> </div>
А
Б
width (ширина) и position: absolute
width (или height) не применяется для большинства встроенных элементов. Имеет по умолчанию значение auto, что для блочного элемента равнозначно width: 100%.
<style type="text/css"> .temnyi {text-align: center;} .svetlyi {} </style> <div class="temnyi"> <div class="svetlyi">Блочный</div> Вст<span class="svetlyi" style="width: 250px;">роен</span>ный </div>
Блочный
ВстроенныйНо не при position: absolute. Здесь блочный элемент не будет растягиваться на ширину родительского элемента. Зато встроенные элементы займут указанную ширину. Но на них по прежнему будут влияют такие свойства, как text-align (обратите внимание на эту статью).
<style type="text/css"> .temnyi {position: relative; text-align: center;} .svetlyi {position: absolute;} </style> <div class="temnyi"> Вст<span class="svetlyi" style="width: 250px; top: 60px;">роен</span>ный <div class="svetlyi"></div> </div>
Блочный
Встроенныйwidth: 100%; для обоих - это ширина родителя, для которого задано позиционирование отличное от static.
<style type="text/css"> .temnyi {text-align: center; position: relative;} .svetlyi {width: 100%; position: absolute;} </style> <div class="temnyi"> <div class="svetlyi">Блочный</div> Вст<span class="svetlyi" style="top: 60px;">роен</span>ный </div>
Блочный
ВстроенныйЕсли width не задано, но есть указание противоположных значений left и right, то блок растянется на всю ширину между этими двумя точками. Иначе right будет проигнорирован.
<style type="text/css"> .temnyi {position: relative;} .svetlyi1 {left: 10%; right: 10%; position: absolute; text-align: center;} .svetlyi2 {left: 10%; right: 10%; top: 60px; width: 250px; position: absolute; text-align: center;} </style> <div class="temnyi"> <div class="svetlyi1">Блочный</div> Вст<span class="svetlyi2">роен</span>ный </div>
Блочный
ВстроенныйПример как написать текст на изображении.
Указанные ниже образцы продемонстрируют возможности применения CSS наложения.
Лес и поле белые,
Белые луга.
У осин заснеженных
Ветки как рога.
Подо льдами крепкими
Дремлют воды рек.
Белыми сугробами
Лег на крыши снег.
В небе звезды яркие
Водят хоровод.
Старый год прощается -
Входит Новый год.
Белые луга.
У осин заснеженных
Ветки как рога.
Подо льдами крепкими
Дремлют воды рек.
Белыми сугробами
Лег на крыши снег.
В небе звезды яркие
Водят хоровод.
Старый год прощается -
Входит Новый год.
Е. Трутнева.
<div style="position: relative;"> <img border="0" height="311" src="http://4.bp.blogspot.com/_q4j3j-JA2ro/SvOib3RrGYI/AAAAAAAAMR4/54xSeZkhPi8/s1600/ice_storm.jpg" width="465" alt="Ветка во льду"/> <div style="font-family: Courier; font-size: 80%; left: 50px; position: absolute; top: 30px; width: 150px; text-indent: 0px;">стих</div> <div style="font-family: Courier; font-size: 80%; left: 340px; position: absolute; top: 290px; width: 150px;">автор</div> </div>
Образец как наложить один текст на другой.
Пример
Образец
<style type="text/css"> #superponer { position: relative; text-align: center; } #superponer h5 { color: #fcda54; font-family: Georgia; font-size: 140px; letter-spacing: -6px; margin: 0; opacity: .9; padding: 0; -moz-transform: skew(20deg); -o-transform:skew(20deg); -webkit-transform: skew(20deg); } #superponer h6 { z-index: 100; color: #4682b4; font-family: Verdana; font-size: 60px; letter-spacing: 20px; margin: 0; padding: 0; position: absolute; top: 26px; left: 120px; } #superponer h6 > span { display: inline-block; color: #ff6666; font-family: Times New Roman; font-size: 100px; font-style: italic; text-shadow: 3px 3px 1px #000000; } #superponer > h6:hover span { -moz-transform: scale(2); -o-transform: scale(2); -webkit-transform: scale(2); zoom: 2; } </style> <div id="superponer"><h5>Пример</h5><h6>Обр<span>а</span>зец</h6></div>
Пример как разместить текст поверх изображения на HTML
<style> .imgteaser { /* общий блок */ position: relative; display: table; margin: 0 auto; border: 10px solid #456; line-height: 0; color: rgb(223,223,223); cursor: pointer; } .imgteaser:after { /* "подробнее" */ content: "подробнее \bb"; position: absolute; right: 10px; bottom: 10px; padding: 5px 10px; background: rgba(17,34,51,.6); line-height: 1.6em; } .imgteaser:hover:after {content: none;} .imgteaser figcaption {display: none;} .imgteaser:hover figcaption { /* прозрачная область */ display: block; position: absolute; bottom: 10px; left: 10px; right: 10px; padding: 5px 10px; background: rgba(68,85,102,.7); font-size: 80%; line-height: 1.3em; } .imgteaser:hover figcaption strong { /* заголовок */ display: block; line-height: 2em; font-size: 110%; } </style> <figure class="imgteaser"> <img height="600" width="539" src="http://4.bp.blogspot.com/-JT5diAXNGw4/TaQPTlnr2oI/AAAAAAAABto/jqJRCIzwQOo/s600/kon.jpg" alt="конь"/> <figcaption><strong>ЗАГОЛОВОК</strong>прозрачная область</figcaption> </figure>
По материалам http://vagabundia.blogspot.com.
Похожие статьи:
Прозрачность CSS
30 комментариев:
Уже как-то использовал слои для сбора шапки строительного сайта, но не думал таким образом их юзать.
Спасибо за интересное решение.
может я канешно и глупый вопрос задам но подскажите пожалуйста как выставить последний пример со всеми значениями в центральном положении
благодарю за полезный материал
.imgteaser { /* общий блок */
position: relative;
display: table;
max-width: 100%;
margin: 0 auto;
line-height: 0;
color: rgb(223,223,223);
cursor: pointer;
}
.imgteaser figcaption {
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
background: rgba(68,85,102,.7);
font-size: 80%;
line-height: 1.3em;
}
.imgteaser img {
width: 100%;
height: auto;
}
Для уменьшения размера шрифта: либо SVG, либо vw ( http://shpargalkablog.ru/2013/03/px-em-calc.html )