Свойство position
Задание:
Рассказать об основных значениях свойства position элементов html-документа.
Значение static:
Элемент, имеющий значение static свойства position, не позиционируется.
Файл index.html:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Значение static свойства position</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="mainContainer">
Позиционирования нет.
<h2>Заголовок h2</h2>
<div>
Длинный текст<br>с переносом строки
</div>
</div>
</body>
</html>
Файл styles.css:
h2 { background: #aef; margin: 0; }
#mainContainer { background: #fee; width: 100%; }
Результат:
Пример использования значения static свойства position можно посмотреть
здесь.
Значение relative:
Элемент, имеющий значение relative свойства position, сдвигается относительно его обычного положения.
Файл index.html:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Значение relative свойства position</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="mainContainer">
Относительное позиционирование.
<h2>Заголовок h2</h2>
<div>
Длинный текст<br>с переносом строки
</div>
</div>
</body>
</html>
Файл styles.css:
h2 { position: relative; background: #aef; margin: 0; top: 10px; left: -10px; }
#mainContainer { background: #fee; width: 100%; }
Результат:
Пример использования значения relative свойства position можно посмотреть
здесь.
Значение absolute:
Элемент, имеющий значение absolute свойства position, извлекается из потока и позиционируется заново. Новые координаты его местоположения (top, bottom, left и right) отсчитываются от ближайшего позиционированного родителя (не static). Если такого родителя нет – относительно документа.
Файл index.html:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Значение absolute свойства position</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="mainContainer">
Абсолютное позиционирование.
<h2>Заголовок h2</h2>
<div>
Длинный текст<br>с переносом строки
</div>
</div>
<div id="relativeContainer">
Абсолютное позиционирование в позиционированном родителе.
<h2>Заголовок h2</h2>
<div>
Длинный текст<br>с переносом строки
</div>
</div>
</body>
</html>
Файл styles.css:
h2 { position: absolute; background: #aef; margin: 0; top: 0px; right: 0px; }
#mainContainer { background: #fee; width: 100%; }
#relativeContainer { position: relative; background: #fee; width: 50%; margin-top: 20px; }
Результат:
Пример использования значения relative свойства position можно посмотреть
здесь.
Значение fixed:
Элемент, имеющий значение fixed свойства position, позиционируется так же, как и absolute, только относительно window. При прокрутке страницы фиксированный элемент не прокручивается вместе со страницей.
Файл index.html:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Значение absolute свойства position</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="mainContainer">
Фиксированное позиционирование.
<h2>Заголовок h2</h2>
<div>
Длинный текст<br>с переносом строки
</div>
</div>
</body>
</html>
Файл styles.css:
html, body { width: 100%; height: 200%; }
h2 { position: fixed; background: #aef; margin: 0; top: 0px; right: 0px; }
#mainContainer { background: #fee; width: 100%; height: 100%; }
Результат:
Пример использования значения fixed свойства position можно посмотреть
здесь.