Курс CSS. Урок 35. Абсолютное позиционирование.
position:absolute;
position:absolute;
На
прошлом уроке
мы изучили основы позиционирования.
Сегодня более подробно разбирем абсолютное позиционирование (position:absolute;).
Итак, напомним, что при абсолютном позиционирование (position:absolute;) элемент позиционируется относительно своего первого позиционируемого (нестатичного) предка.
Это значит, что элемент сначала ищет ближайшего нестатичного предка и если находит, то позиционируется относительно него. А если не находит, то позиционируется относительно <body> (<html>).
Если элемент имеет свойство position:absolute; и не имеет координирующих свойств (top, right, bottom, left), то элемент остается на том же месте, что и при position:static; (по умолчанию) с той лишь разницей, что теперь при position:absolute; он может расшаривать пространство с контентом родителя.
Пусть у нас есть некий большой блок, а внутри блок поменьше. Рассмотрим ситуацию по умолчанию.
Теперь дадим блоку поменьше свойство position:absolute;
Теперь попробуем сопроводить маленький блок свойством позиционирования, например, left:10px;
Теперь сделаем большой блок нестатичным (добавив свойство position:relative;), к маленькому блоку добавим свойства right:0px;и bottom:-20px; вместо left:0px;, остальное оставив как было и посмотрим эффект -
Теперь очевидно, что маленький блок позиционируется относительно своего ближайшего родителя и причина этому - нестатичность родителя. Обратите внимание, что значения свойств top, bottom, left, right могут быть и отрицательными.
Теперь к нашей HTML заготовки добавим небольшой графический элемент, уголок с надписью "new":
В примере использовали следующие правила для стилей:
В примере использовали следующий код HTML:
Созданные новые классы в файле стилей CSS и код HTML будем также использовать в нашем очередном учебном тестовом примере.
css_035_001.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
css_035_001.zip ← скачайте пример, чтобы установить на свой сайт...
Напоминание. Все нужные графические файлы мы скачали заранее, еще на уроке 15...
Сегодня более подробно разбирем абсолютное позиционирование (position:absolute;).
Итак, напомним, что при абсолютном позиционирование (position:absolute;) элемент позиционируется относительно своего первого позиционируемого (нестатичного) предка.
Это значит, что элемент сначала ищет ближайшего нестатичного предка и если находит, то позиционируется относительно него. А если не находит, то позиционируется относительно <body> (<html>).
Если элемент имеет свойство position:absolute; и не имеет координирующих свойств (top, right, bottom, left), то элемент остается на том же месте, что и при position:static; (по умолчанию) с той лишь разницей, что теперь при position:absolute; он может расшаривать пространство с контентом родителя.
Пусть у нас есть некий большой блок, а внутри блок поменьше. Рассмотрим ситуацию по умолчанию.
Большой блок
Внутри блок поменьше...
Ситуация по умолчанию.
Теперь дадим блоку поменьше свойство position:absolute;
Большой блок
Блоку поменьше присвоили свойство position:absolute; и теперь контент блока не замечает, внутреннего блока! Благодаря прозрачности внутреннего блока мы видим этот контент, но сам контент не желает замечать, что место-то занято! Маленький внутренний блок живет своей жизнью и игнорируется родителем, хотя тот и мешает показывать контент.
Теперь попробуем сопроводить маленький блок свойством позиционирования, например, left:10px;
Большой блок
Теперь попробуем сопроводить маленький блок свойством позиционирования, например, left:0px;
Обратите внимание! Маленький блок позиционируется не относительно родителя, т.к. тот статичный, а относительно первого нестатичного предка.
Обратите внимание! Маленький блок позиционируется не относительно родителя, т.к. тот статичный, а относительно первого нестатичного предка.
Теперь сделаем большой блок нестатичным (добавив свойство position:relative;), к маленькому блоку добавим свойства right:0px;и bottom:-20px; вместо left:0px;, остальное оставив как было и посмотрим эффект -
Большой блок -
Теперь сделаем большой блок нестатичным (добавив свойство position:relative;), к маленькому блоку добавим свойства right:0px;и bottom:-20px; вместо left:0px;, остальное оставив как было и посмотрим эффект -
Теперь очевидно, что маленький блок позиционируется относительно своего ближайшего родителя и причина этому - нестатичность родителя.
Теперь очевидно, что маленький блок позиционируется относительно своего ближайшего родителя и причина этому - нестатичность родителя.
Теперь очевидно, что маленький блок позиционируется относительно своего ближайшего родителя и причина этому - нестатичность родителя. Обратите внимание, что значения свойств top, bottom, left, right могут быть и отрицательными.
Теперь к нашей HTML заготовки добавим небольшой графический элемент, уголок с надписью "new":
position:static; - По умолчанию. Элементы показываются по порядку, как они появляются в потоке документа.
position:absolute; - Элемент позиционируется относительно своего первого позиционируемого (нестатичного) предка.
position:fixed; - Элемент позиционируется относительно окна браузера. Поэтому они вылетели из таблицы и находятся внизу экрана, 40 и 60 пикселей от нижнего края.
position:relative; - Элемент позиционируется относительно своей нормальной позиции, так, например, "left:20" добавляет 20 пикселей к своей нормальной позиции.
position:inherit; - Значение свойства position (позиционирование) наследуется от своего родителя.
В примере использовали следующие правила для стилей:
.body_css_035 {
position:relative;
background-color: #D2D2D2;
outline: 0px solid #CCCCCC;
color: #696969;
font: 11px Verdana, sans-serif;
}
.wrapper_css_035 {
/* width:80%; */
width:650px;
background-color: #F4F4F4;
margin: 30px auto;
}
.header_css_035 {
height:75px;
background-color: #F8AC18;
background-image: url('images/redHeader.png');
background-repeat: no-repeat;
}
.content_css_035 {
padding: 20px 30px;
}
.block_big_css_035 {
background-color: #D2F2F2;
width:640px;
height:120px;
padding: 10px;
outline: 1px solid #72D2D2;
}
.block_little_css_035 {
background-color: #D2F2D2;
width:300px;
height:60px;
outline: 1px solid #02F202;
opacity: 0.5;
}
#pic_new_css_035 {
position:absolute;
top:0;
left:0;
}
В примере использовали следующий код HTML:
<div id="body_css_035" class="body_css_035" style="padding: 1px 0;"> <div id="wrapper_css_035" class="wrapper_css_035"> <div id="header_css_035" class="header_css_035"></div> <div id="content_css_035" class="content_css_035"> <img id="pic_new_css_035" src="images/new.png" width="104" height="104" /> <p>position:static; - По умолчанию. Элементы показываются по порядку, как они появляются в потоке документа.</p> <p>position:absolute; - Элемент позиционируется относительно своего первого позиционируемого (нестатичного) предка.</p> <p>position:fixed; - Элемент позиционируется относительно окна браузера. Поэтому они вылетели из таблицы и находятся внизу экрана, 40 и 60 пикселей от нижнего края.</p> <p>position:relative; - Элемент позиционируется относительно своей нормальной позиции, так, например, "left:20" добавляет 20 пикселей к своей нормальной позиции.</p> <p>position:inherit; - Значение свойства position (позиционирование) наследуется от своего родителя.</p> </div> </div> </div>
Созданные новые классы в файле стилей CSS и код HTML будем также использовать в нашем очередном учебном тестовом примере.
css_035_001.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
css_035_001.zip ← скачайте пример, чтобы установить на свой сайт...
Напоминание. Все нужные графические файлы мы скачали заранее, еще на уроке 15...
***** Машина-Функционал для передвижения по страничкам курса CSS *****
Вы кликнули поясняющий рисунок, который показывает, как работает тот или иной функционал. Кликать эти рисунки не надо, нет смысла.
Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.
Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.
