Курс CSS. Урок 36. Относительное позиционирование.
position:relative;
position:relative;
На
позапрошлом уроке
мы изучили основы позиционирования вообще,
на
прошлом уроке
изучили Абсолютное позиционирование (position:absolute;), а также координирующие свойства (top: right: bottom: left:).
На этом уроке мы рассмотрим Относительное позиционирование (position:relative;)
Оттолкнемся от позиционирования по умолчанию, т.е. когда свойство позиционирования вообще не задано или задано как position:static; (т.е. Статичное позиционирование, позиционирование по умолчанию).
Теперь дадим блоку свойство position:relative;
Но это впечатление обманчиво. На самом деле, ранее наш блок был крепко прибит к потоку. А теперь, после того как свойство position приняло значение relative, он от потока оторван. Вроде как у доски в заборе вырвали гвозди, она по-прежнему в этом заборе стоит, и человеку кажется, что забор цел, как и раньше. Но это не так. Доску теперь можно легко сдвинуть право или влево, а то и вообще унести, чтобы прибить в совсем другое место.
В нашем случае двигать доску, т.е. блок, конечно, можно с помощью координирующих свойств (top: right: bottom: left:). Причем этим координирующим свойствам можно давать как положительные, так и отрицательные значения.
Пробуем top:20px;
В ответ на добавление top:20px; наш блок сместился относительно своей нормальной позиции вниз на 20 пикселей.
Пробуем top:-20px;
В ответ на добавление top:-20px; наш блок сместился относительно своей нормальной позиции верх на 20 пикселей.
Пробуем bottom:50px;
В ответ на добавление bottom:50px; наш блок сместился относительно своей нормальной позиции верх на 50 пикселей.
Пробуем left:50px;
В ответ на добавление left:50px; наш блок сместился относительно своей нормальной позиции на право на 50 пикселей.
Пробуем right:100px;
В ответ на добавление right:100px; наш блок сместился относительно своей нормальной позиции на лево на 100 пикселей.
На практике свойство position:relative; часто используется следующим образом.
Свойство с данным значением присваивается большому блоку, а внутри этого блока имеется маленький блок, которому присваивается position:absolute;
Такая комбинация позволяет маленькому блоку позиционироваться нужным образом внутри большого.
Пример:
Теперь к нашей HTML заготовки добавим небольшой графический элемент сверху и по центру:
В примере использовали следующие правила для стилей:
В примере использовали следующий код HTML:
Созданные новые классы в файле стилей CSS и код HTML будем также использовать в нашем очередном учебном тестовом примере.
css_036_001.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
css_036_001.zip ← скачайте пример, чтобы установить на свой сайт...
Напоминание. Все нужные графические файлы мы скачали заранее, еще на уроке 15...
На этом уроке мы рассмотрим Относительное позиционирование (position:relative;)
Оттолкнемся от позиционирования по умолчанию, т.е. когда свойство позиционирования вообще не задано или задано как position:static; (т.е. Статичное позиционирование, позиционирование по умолчанию).
Ситуация по умолчанию.
position:static;
position:static;
Теперь дадим блоку свойство position:relative;
Присвоили свойство position:relative;
Что изменилось? Визуально ровным счетом ничего. Блок после присвоения position:relative; остался на том же месте, даже не пошевелился.
Но это впечатление обманчиво. На самом деле, ранее наш блок был крепко прибит к потоку. А теперь, после того как свойство position приняло значение relative, он от потока оторван. Вроде как у доски в заборе вырвали гвозди, она по-прежнему в этом заборе стоит, и человеку кажется, что забор цел, как и раньше. Но это не так. Доску теперь можно легко сдвинуть право или влево, а то и вообще унести, чтобы прибить в совсем другое место.
В нашем случае двигать доску, т.е. блок, конечно, можно с помощью координирующих свойств (top: right: bottom: left:). Причем этим координирующим свойствам можно давать как положительные, так и отрицательные значения.
Пробуем top:20px;
В ответ на добавление top:20px; наш блок сместился относительно своей нормальной позиции вниз на 20 пикселей.
Пробуем top:-20px;
Пробуем bottom:50px;
Пробуем left:50px;
Пробуем right:100px;
На практике свойство position:relative; часто используется следующим образом.
Свойство с данным значением присваивается большому блоку, а внутри этого блока имеется маленький блок, которому присваивается position:absolute;
Такая комбинация позволяет маленькому блоку позиционироваться нужным образом внутри большого.
Пример:
Большой блок ...
Свойство со значением position:relative; присваивается большому блоку, а внутри этого блока имеется маленький блок, которому присваивается position:absolute;
Теперь мы маленькому блоку даем координирующие свойства:
right:160px; top:-30px;
в результате маленький блок смещается направо и верх именно относительно большого блока, т.к. тот благодаря position:relative; не является статичным, но и не двигается со своего места, благодаря отсутствию координирующих свойств.
CSS - это наше всё!
... имеет позиционирование position:relative;Свойство со значением position:relative; присваивается большому блоку, а внутри этого блока имеется маленький блок, которому присваивается position:absolute;
Теперь мы маленькому блоку даем координирующие свойства:
right:160px; top:-30px;
в результате маленький блок смещается направо и верх именно относительно большого блока, т.к. тот благодаря position:relative; не является статичным, но и не двигается со своего места, благодаря отсутствию координирующих свойств.
Теперь к нашей HTML заготовки добавим небольшой графический элемент сверху и по центру:
position:static; - По умолчанию. Элементы показываются по порядку, как они появляются в потоке документа.
position:absolute; - Элемент позиционируется относительно своего первого позиционируемого (нестатичного) предка.
position:fixed; - Элемент позиционируется относительно окна браузера. Поэтому они вылетели из таблицы и находятся внизу экрана, 40 и 60 пикселей от нижнего края.
position:relative; - Элемент позиционируется относительно своей нормальной позиции, так, например, "left:20" добавляет 20 пикселей к своей нормальной позиции.
position:inherit; - Значение свойства position (позиционирование) наследуется от своего родителя.
В примере использовали следующие правила для стилей:
.body_css_036 {
position:relative;
background-color: #D2D2D2;
outline: 0px solid #CCCCCC;
color: #696969;
font: 11px Verdana, sans-serif;
}
.wrapper_css_036 {
/* width:80%; */
width:650px;
background-color: #F4F4F4;
margin: 30px auto;
}
.header_css_036 {
height:75px;
background-color: #F8AC18;
background-image: url('images/redHeader.png');
background-repeat: no-repeat;
position:relative;
}
.content_css_036 {
padding: 20px 30px;
}
.block_big_css_036 {
background-color: #D2F2F2;
width:640px;
height:120px;
padding: 10px;
outline: 1px solid #72D2D2;
}
.block_little_css_036 {
background-color: #D2F2D2;
width:300px;
height:60px;
outline: 1px solid #02F202;
opacity: 0.5;
}
#pic_new_css_036 {
position:absolute;
top:0;
left:0;
}
#button_css_036 {
position:absolute;
top:-14px;
left:294px;
border:1px solid #F00000;
}
В примере использовали следующий код HTML:
<div id="wrapper_css_036" class="wrapper_css_036"> <div id="header_css_036" class="header_css_036"> <img src="images/button_css.png" width="87" height="28" id="button_css_036" title="CSS - это наше всё!" alt="CSS - это наше всё!" /> </div> <div id="content_css_036" class="content_css_036"> <img id="pic_new_css_036" 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>
Созданные новые классы в файле стилей CSS и код HTML будем также использовать в нашем очередном учебном тестовом примере.
css_036_001.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
css_036_001.zip ← скачайте пример, чтобы установить на свой сайт...
Напоминание. Все нужные графические файлы мы скачали заранее, еще на уроке 15...
***** Машина-Функционал для передвижения по страничкам курса CSS *****
Вы кликнули поясняющий рисунок, который показывает, как работает тот или иной функционал. Кликать эти рисунки не надо, нет смысла.
Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.
Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.
