В данном уроке мы с вами разберем абсолютное
позиционирование элементов. Оно позволяет
располагать элементы по указанным координатам
страницы. Например, можно расположить элемент
в позицию 100px сверху страницы и
200px слева. Элемент переместится
туда, не взирая на то, что там будут располагаться
другие элементы и просто станет поверх их.
Говорят, что при этом элемент выпадает из
нормального потока документа: все
остальные элементы будут вести себя так,
будто нашего элемента нет.
Для того, чтобы сделать элемент абсолютно
спозиционированным, этому элементу необходимо
задать свойство position в значении
absolute. Кроме этого свойства, нужны
еще два: одно будет задавать координату по
вертикали, а второе - по горизонтали.
Для вертикали нужно задать отступ или сверху,
или снизу. Отступ сверху задает свойство
top, а отступ снизу - свойство bottom.
Для горизонтали нужно задать отступ или слева,
или справа. Отступ слева задает свойство
left, а отступ справа - свойство right.
Давайте посмотрим на примерах.
Пример
Для начала давайте просто сделаем два блока без позиционирования (обратите внимание на то, что элементы не прижаты к краю окна, так как body имеет margin по умолчанию):
<div id="elem1"></div>
<div id="elem2"></div>
#elem1 {
width: 200px;
height: 200px;
border: 1px solid red;
}
#elem2 {
width: 100px;
height: 100px;
border: 1px solid green;
}
:
Пример
Давайте теперь зеленому блоку зададим абсолютное
позиционирование, поставив его в позицию
сверху 150px и слева 100px:
<div id="elem1"></div>
<div id="elem2"></div>
#elem1 {
width: 200px;
height: 200px;
border: 1px solid red;
}
#elem2 {
position: absolute;
top: 150px;
left: 100px;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
Пример
Давайте теперь поставим зеленый блок в позицию
0px сверху и 0px слева:
<div id="elem1"></div>
<div id="elem2"></div>
#elem1 {
width: 200px;
height: 200px;
border: 1px solid red;
}
#elem2 {
position: absolute;
top: 0px;
left: 0px;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
Пример
Давайте теперь поставим зеленый блок в позицию
0px сверху и 0px справа:
<div id="elem1"></div>
<div id="elem2"></div>
#elem1 {
width: 200px;
height: 200px;
border: 1px solid red;
}
#elem2 {
position: absolute;
top: 0;
right: 0;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
Пример
Давайте теперь поставим зеленый блок в позицию
0px снизу и 0px справа:
<div id="elem1"></div>
<div id="elem2"></div>
#elem1 {
width: 200px;
height: 200px;
border: 1px solid red;
}
#elem2 {
position: absolute;
bottom: 0;
right: 0;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
Пример
Давайте теперь поставим зеленый блок в позицию
0px снизу и 0px слева:
<div id="elem1"></div>
<div id="elem2"></div>
#elem1 {
width: 200px;
height: 200px;
border: 1px solid red;
}
#elem2 {
position: absolute;
bottom: 0;
left: 0;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
Практические задачи
С помощью абсолютного позиционирования разместите блоки следующим образом:
С помощью абсолютного позиционирования разместите блоки следующим образом:
С помощью абсолютного позиционирования разместите блоки следующим образом:
С помощью абсолютного позиционирования разместите блоки следующим образом: