Панель Управления





Курс CSS. Урок 37. Фиксированное позиционирование. position:fixed;
Стиль сайта. Онлайновый курс по теме CSS. Сделано в kocby.ru Курс CSS. Урок 37. Фиксированное позиционирование. position:fixed; Фиксированное позиционирование (position:fixed;) похоже на Абсолютное позиционирование (position:absolute;). Принципиальное отличие заключается в том, что элемент при фиксированном позиционировании позиционируется относительно окна браузера, независимо от того, в каком блоке он фактически находится.
© Перепечатка разрешается с установкой ссылки на ресурс http://kocby.ru
Курс CSS. Урок 37. Фиксированное позиционирование.
position:fixed;
Короткое напоминание: На уроке 34 мы изучили основы позиционирования вообще, на уроке 35 изучили Абсолютное позиционирование (position:absolute;), а также координирующие свойства (top: right: bottom: left:), на уроке 36 изучили Абсолютное позиционирование. (position:relative;).

Фиксированное позиционирование (position:fixed;) похоже на Абсолютное позиционирование (position:absolute;). Принципиальное отличие заключается в том, что элемент при фиксированном позиционировании позиционируется относительно окна браузера, независимо от того, в каком блоке он фактически находится.

Положение элемента является стабильным, фиксированным, независит от прокрутки окна.

Попробуем добавить к нашей HTML заготовки графический элемент с фиксированным позиционированием:
Оператор поддержки
CSS - это наше всё!

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 *****
:: :: /


Вы кликнули поясняющий рисунок, который показывает, как работает тот или иной функционал. Кликать эти рисунки не надо, нет смысла.

Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.


Если вы планируете вернуться сюда позднее...
Пожалуйста, запомните эту страничку -
URL: http://kocby.ru/css/p037.html
Спасибо за посещение этой странички и внимательное отношение к ее контенту и дизайну. Удачи и успеха!
© KOCBY.RU :: перепечатка материалов разрешается с указанием ссылки на домен KOCBY.RU ©
Basket is empty :: Корзина пустая
Close and hide in basket :: Закрыть и спрятать в корзину
***** Реклама *****
Посмотри в зеркало! Что там видно?
Красивая девушка брюнетка слева Красивая девушка блондинка справа
Красивая девушка блондинка слева Красивая девушка брюнетка справа
Наверх ↑