belarusweb.net
© Петр Романовский Минск, 2016-2017.



belarusweb.net

Основы создания сайтов...
CSS >>>

5.2. Позиционирование элементов

Все браузеры в ходе разбора html-кода и формирования веб-страницы располагают элементы по установленному стандарту, согласно которому блочные элементы располагаются вертикально друг под другом, т.к. по умолчанию они стремятся занять всю доступную в данной ситуации ширину, а строчные элементы наоборот, располагаются горизонтально друг за другом до тех пор, пока не будет занята вся доступная в данной ситуации ширина, после чего браузер делает перенос строки и продолжает располагать строчные элементы друг за другом на новой строке. Однако такой способ расположения элементов на странице далеко не всегда удобен, поэтому в CSS присутствует специальное ненаследуемое свойство position, которое позволяет определять порядок расположения элементов относительно окна браузера, других элементов на веб-странице или относительно текущего местоположения элемента. Данное свойство используется в комбинации со свойствами left, right, top и bottom, которые определяют относительное смещение позиционированного элемента (см. пример 5.2). В качестве значений эти свойства принимают любые доступные в CSS единицы измерения, включая отрицательные значения. Разрешается использовать проценты, которые у свойств left и right рассчитываются относительно ширины родительского элемента, а у top и bottom относительно высоты родительского элемента. Если указать в качестве значения свойств ключевое слово auto, положение позиционированного элемента не изменится.

Теперь перечислим значения свойства position:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Позиционирование элементов</title>
	<style>
		.class_1{
		color: green;
		border: solid 2px blue;
		width: 450px;
		height: 150px;
		}
		.pos_1{position: absolute; top: 20px; left: 20px;}
		.pos_2{position: fixed; top: 240px; left: 20px;}
	</style>
</head>
<body>
	<p class="class_1 pos_1">
		Позиционирован абсолютно относительно окна браузера, т.к. 
		позиционированные не статически родитель или предок отсутствуют.
		При чем координаты левого верхнего угла элемента равны  20px 
		по горизонтали и 20px по вертикали относительно левого верхнего 
		угла браузера.
	</p>
	
	<p class="class_1 pos_2">
		Позиционирован фиксированно. При чем координаты левого верхнего угла 
		элемента равны 20px по горизонтали и 240px по вертикали относительно 
		левого верхнего угла браузера. Если бы на странице присутствовала 
		прокрутка, то данный абзац всегда оставался бы на месте, в то время 
		как верхний абзац стал бы перемещаться вместе со страницей.
	</p>
</body>
</html>

Пример 5.2. Использование различных вариантов позиционирования элементов

Наберите код примера в редакторе и попробуйте посмотреть, как изменится положение абзацев, если убрать позиционирование. Затем еще раз перечитайте материал, по ходу чтения пробуя применять к ним указанные варианты позиционирования.

Введение позиционирования значительно облегчило жизнь веб-разработчикам, позволив размещать элементы практически в любом месте веб-документа по своему усмотрению. Однако при использовании позиционирования зачастую происходит наложение элементов друг на друга, что привело к идее введения дополнительного ненаследуемого свойства z-index для регулирования положения позиционированных элементов не только в горизонтальной плоскости вдоль осей х и у, но и по вертикали вдоль оси z, имитируя тем самым третье измерение, перпендикулярное экрану (см. пример 5.3).

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>z-index</title>
	<style>
		.class_1{
		padding: 0px;
		border: solid 5px red;
		width: 400px;
		height: 200px;
		}
		.pos_1{position: absolute; top: 20px; left: 20px;}
		.pos_2{position: absolute; top: 60px; left: 60px;}
	</style>
</head>
<body>
	<p class="class_1 pos_1" style="z-index: 2; background-color: yellow">
		Позиционирован абсолютно. z-index равен 2.
	</p>
	
	<p class="class_1 pos_2" style="z-index: 3; background-color: violet">
		Позиционирован абсолютно. z-index равен 3, поэтому данный абзац 
		находится выше, т.е. ближе к нам по оси z.
	</p>
</body>
</html>

Пример 5.3. Использование свойства z-index

В качестве значений свойство принимает целые числа (включая отрицательные). Чем больше значение z-индекса элемента, тем выше он находится по сравнению с элементами, у которых он меньше. Если же элементы имеют одинаковый z-индекс, то на переднем плане будет отображаться элемент, который в html-коде встречается ниже. В качестве значения разрешается также использовать ключевое слово auto, которое присваивает элементу z-индекс родителя.

Для абсолютно и фиксированно позиционированных элементов имеется еще одно ненаследуемое свойство clip, определяющее прямоугольную область элемента, в которой содержимое будет видимым. Вся остальная часть обрезается и на странице не показывается (см. пример 5.4).

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Свойство clip</title>
	<style>
		.class_1{
		padding: 5px;
		border: solid 8px red;
		width: 400px;
		height: 150px;
		left: 20px;
		overflow: scroll;
		clip: rect(6px, 385px, 135px, 6px);
		}
		.pos_1{top: 20px; position: absolute;}
		.pos_2{top: 190px;  position: fixed;}
	</style>
</head>
<body>
	<p class="class_1 pos_1" style="background-color: yellow;">
		Позиционирован, как absolute. Отсекаем полосы прокрутки 
		и делаем тоньше границы. 
	</p>
	
	<p class="class_1 pos_2" style="background-color: violet;">
		Позиционирован, как fixed. Отсекаем полосы прокрутки 
		и делаем тоньше границы.
	</p>
</body>
</html>

Пример 5.4. Использование свойства clip

В качестве значений свойство clip принимает:

Рис. 5.5. Схема отсчета некоторых значений свойства clip

Контрольные вопросы и задания

  1. Какое свойство используется для осуществления позиционирования элементов? Опишите виды позиционирования, а также их особенности.
  2. Какие свойства используются в комбинации с position для смещения элементов в горизонтальной плоскости?
  3. Для чего нужен z-index? Опишите значения соответствующего свойства.
  4. Для каких элементов разрешается применять свойство clip? Опишите его значения.

Словарь новых английских слов

display [dɪˈspleɪ] – показывать, демонстрировать.
inline [ɪnˈlaɪn] – строчный.
run [rʌn] – бежать, скользить.
table [ˈteɪb(ə)l] – таблица, стол.
caption [ˈkæpʃn] – заголовок.
cell [sel] – отсек, ячейка.
row [rou] – ряд.
column [ˈkɑːləm] – столбец, колонка.
group [ɡruːp] – группа.
head [hed] – голова, головной.
foot [fʊt] – ступня, основание, нижняя часть.
list [lɪst] – список, каталог.
item [ˈaɪtəm] – пункт, параграф.
none [nʌn] – никакой, ничто.
relative [ˈrelətɪv] – относительный.
static [ˈstætɪk] – неподвижный, статичный.
move [mu:v] – двигать, перемещать.
absolute [ˈæbsəluːt] – абсолютный, безусловный.
fixed [fɪkst] – неподвижный, закрепленный.
bottom [ˈbɑːtəm] – самый нижний, последний.
clip [klɪp] – урезать, обрезать.
float [floʊt] – плавать.
margin [ˈmɑːrdʒən] – поле страницы, запас.
overflow [oʊvərˈfloʊ] – переполнять.
hidden [ˈhidn] – скрытый, спрятанный.
clear [klɪə] – очищать.
both [boʊθ] – оба.
visibility [ˌvɪzəˈbɪləti] – видимость, обзор.
collapse [kəˈlæps] – сплющивание.
opacity [oʊˈpæsəti] – непрозрачность.
align []əˈlaɪn – ставить в ряд.
vertical [ˈvəːtɪk(ə)l] – вертикальный, отвесный.
middle [ˈmɪdl] – средний.
resize [rɪˈsaɪz] – изменять размер.
Комментарии (0)
Петр Романовский
1. Приветствуются комментарии, которые содержат дополнения к материалу текущей страницы, а также ваши ответы на вопросы других пользователей.
2. Если вам что-то непонятно - спрашивайте, не забывая написать, что именно и с какого места.
Показаны все комментарии
Чтобы оставить свой комментарий, авторизуйтесь, пожалуйста!    
     
belarusweb.net © Петр Романовский, Минск, 2016-2017.
Связаться с автором
Наверх