Курс CSS. Урок 37. Фиксированное позиционирование.
position:fixed;
position:fixed;
Короткое напоминание:
На
уроке 34
мы изучили основы позиционирования вообще,
на
уроке 35
изучили Абсолютное позиционирование (position:absolute;), а также координирующие свойства (top: right: bottom: left:),
на
уроке 36
изучили Абсолютное позиционирование. (position:relative;).
Фиксированное позиционирование (position:fixed;) похоже на Абсолютное позиционирование (position:absolute;). Принципиальное отличие заключается в том, что элемент при фиксированном позиционировании позиционируется относительно окна браузера, независимо от того, в каком блоке он фактически находится.
Положение элемента является стабильным, фиксированным, независит от прокрутки окна.
Попробуем добавить к нашей HTML заготовки графический элемент с фиксированным позиционированием:
Обратите внимание, наш элемент для фиксированного позиционирования id="operator_css_037" мы можем разместить в любом блоке, где покажется более удобным. Все равно, если элементу присвоено фиксированное позиционирование (position:fixed;), то координирующие свойства (top: right: bottom: left:) будут указывать его сдвиг относительно окна браузера, а не родительского элемента. Это есть принципиальное отличие фиксированного позиционирования от абсолютного.
В примере использовали следующие правила для стилей:
В примере использовали следующий код HTML:
Созданные новые классы в файле стилей CSS и код HTML будем также использовать в нашем очередном учебном тестовом примере.
css_037_001.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
css_037_001.zip ← скачайте пример, чтобы установить на свой сайт...
Напоминание. Все нужные графические файлы мы скачали заранее, еще на уроке 15...
Фиксированное позиционирование (position:fixed;) похоже на Абсолютное позиционирование (position:absolute;). Принципиальное отличие заключается в том, что элемент при фиксированном позиционировании позиционируется относительно окна браузера, независимо от того, в каком блоке он фактически находится.
Положение элемента является стабильным, фиксированным, независит от прокрутки окна.
Попробуем добавить к нашей HTML заготовки графический элемент с фиксированным позиционированием:
position:static; - По умолчанию. Элементы показываются по порядку, как они появляются в потоке документа.
position:absolute; - Элемент позиционируется относительно своего первого позиционируемого (нестатичного) предка.
position:fixed; - Элемент позиционируется относительно окна браузера. Поэтому они вылетели из таблицы и находятся внизу экрана, 40 и 60 пикселей от нижнего края.
position:relative; - Элемент позиционируется относительно своей нормальной позиции, так, например, "left:20" добавляет 20 пикселей к своей нормальной позиции.
position:inherit; - Значение свойства position (позиционирование) наследуется от своего родителя.
Обратите внимание, наш элемент для фиксированного позиционирования id="operator_css_037" мы можем разместить в любом блоке, где покажется более удобным. Все равно, если элементу присвоено фиксированное позиционирование (position:fixed;), то координирующие свойства (top: right: bottom: left:) будут указывать его сдвиг относительно окна браузера, а не родительского элемента. Это есть принципиальное отличие фиксированного позиционирования от абсолютного.
В примере использовали следующие правила для стилей:
.body_css_037 { position:relative; background-color: #D2D2D2; outline: 0px solid #CCCCCC; color: #696969; font: 11px Verdana, sans-serif; } .wrapper_css_037 { /* width:80%; */ width:650px; background-color: #F4F4F4; margin: 30px auto; } .header_css_037 { height:75px; background-color: #F8AC18; background-image: url('images/redHeader.png'); background-repeat: no-repeat; position:relative; } .content_css_037 { padding: 20px 30px; } .block_big_css_037 { background-color: #D2F2F2; width:640px; height:120px; padding: 10px; outline: 1px solid #72D2D2; } .block_little_css_037 { background-color: #D2F2D2; width:300px; height:60px; outline: 1px solid #02F202; opacity: 0.5; } #pic_new_css_037 { position:absolute; top:0; left:0; } #button_css_037 { position:absolute; top:-14px; left:294px; border:1px solid #F00000; } #operator_css_037 { position:fixed; width:22px; height:180px; top:250px; left:0px; } #operator_css_037 img { border:none; }
В примере использовали следующий код HTML:
<div id="operator_css_037" class="operator_css_037" style=""> <a href="http://kocby.ru/css/"><img src="images/operator.png" width="22" height="180" class="" alt="Оператор поддержки" title="Оператор поддержки"></a> </div> <div id="wrapper_css_037" class="wrapper_css_037"> <div id="header_css_037" class="header_css_037"> <img src="images/button_css.png" width="87" height="28" id="button_css_036" title="CSS - это наше всё!" alt="CSS - это наше всё!" /> </div> <div id="content_css_037" class="content_css_037"> <img id="pic_new_css_037" 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_037_001.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
css_037_001.zip ← скачайте пример, чтобы установить на свой сайт...
Напоминание. Все нужные графические файлы мы скачали заранее, еще на уроке 15...
***** Машина-Функционал для передвижения по страничкам курса CSS *****
Вы кликнули поясняющий рисунок, который показывает, как работает тот или иной функционал. Кликать эти рисунки не надо, нет смысла.
Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.
Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.