Позиционирование элементов в CSS
Сегодня мы с Вами начнем разбирать одну из важнейших тем в языке CSS, а также при создании сайтов, которая называется позиционирование элементов. При помощи позиционирования, мы можем указывать расположение элементов относительно окна браузера, либо какого-либо родительского элемента в котором он находится. Для того чтобы произвести позиционирование элемента, существует специальное css свойство position, которое можно применить к нужному элементу. Теперь стоит поговорить о значениях, которое может принимать данное css свойство. Первое значение называется static, которое является значением по умолчанию, и никаких изменений при данном значении не происходит. Второе значение - relative, это так называемое относительное позиционирование, означает, что элемент будет спозиционирован относительно его текущего местоположения. А помогают в позиционировании дополнительные свойства: left, right, top, bottom, при использовании которых устанавливается место, где будет расположен указанный элемент. Предпоследнее значение - absolute, означающее, что позиционирование элемента будет абсолютным, т.е., положение элемента выбивается из потока, как будто на странице его не существует. Аналогично с предыдущим значением, положение элементов задается таким же образом, однако влияет значение свойства position у его родителей. Если родительский элемент имеет значение static, то положение элемента устанавливается от края окна браузера, но если значение родительского элемента - relative, то положение элемента будет рассчитываться от края родительского элемента. И наконец, последнее значение, которое может принимать изучаемое свойство это fixed, которое по описанию напоминает значение absolute, однако положение остается фиксированным, и при прокрутке окна браузера не изменяет своего положения. Расположение элемента также задается при помощи свойств: left, right, top, bottom. А теперь, рассмотрев все возможные значения изучаемого css свойства position, приступим к примеру, для закрепления полученных знаний.
<html>
<head>
<title>Свойство position</title>
<link rel="stylesheet" href="css/styles.css" type="text/css" />
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
Устанавливаем позиционирование:
.parent {
background: #999;
margin: 50px 0 0 50px;
height: 250px;
width: 200px;
}
.child {
background: #0f0;
height: 70px;
width: 70px;
position: absolute;
top: 0;
left: 0;
}
Мы создали два блока, родительский и дочерний. Каждому из них был задан свой цвет фона, фиксированная ширина и высота, также для родительского блока задан отступ сверху и слева равный 50 пикселей. В примере мы установили для дочернего блока абсолютное позиционирование, а также расположение элементов сверху и слева равные нулю, означающие, что блок будет располагаться сверху и слева, относительно окна браузера, т.к., для родительского блока не было задано относительного позиционирования. В результате вы можете убедиться на изображении ниже, где помимо данного примера рассмотрено еще два, для достижения таких результатов, необходимо всего лишь изменять позиционирование элементов (на изображении все указано).
А на этом мы заканчивает изучение столь важного css свойства, благодаря которому, можно реализовывать довольно сложные задачи. Всего Вам хорошего и успехов в сайтостроении!
