HTML
.pdf
position
Синтаксис
position: absolute | fixed | relative | static | inherit
Значения
●absolute - Указывает, что элемент абсолютно позиционирован, при этом другие элементы отображаются на веб-странице словно абсолютно позиционированного элемента и нет. Положение элемента задается свойствами left, top, right и bottom, также на положение влияет значение свойства position родительского элемента. Так, если у родителя значение position установлено как static или родителя нет, то отсчет координат ведется от края окна браузера. Если у родителя значение position задано как fixed, relative или absolute, то отсчет координат ведется от края родительского элемента.
●fixed - По своему действию это значение близко к absolute, но в отличие от него привязывается к указанной свойствами left, top, right и bottom точке на экране и не меняет своего положения при прокрутке веб-страницы. Браузер Firefox вообще не отображает полосы прокрутки, если положение элемента задано фиксированным, и оно не помещается целиком в окно браузера. В браузере Opera хотя и показываются полосы прокрутки, но они никак не влияют на позицию элемента.
●relative - Положение элемента устанавливается относительно его исходного места. Добавление свойств left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения.
●static - Элементы отображаются как обычно. Использование свойств left, top, right и bottom не приводит к каким-либо результатам.
●inherit - Наследует значение родителя.
Использование position
Свойство position задает позиционирование элемента относительно исходного положения или родителя.
Рассмотрим для начала значение fixed, которое выводит элемент из потока и привязывает к определенной точке окна. Особенностью fixed является фиксация слоя на одном месте, причем это положение не меняется при изменении размеров окна или прокрутке страницы. Такая особенность позволяет создавать неподвижные элементы интерфейса. Добавления fixed недостаточно, нужно также задать положение элемента с помощью одного или двух свойств left, top, right, bottom, они управляют положением относительно окна браузера.
BODY { margin-left: 90px; }
.feedback {
position: fixed; left: 0; top: 50%;
background: green; width: 70px; padding: 5px;
}
....
<body>
<p>text text text text text text text text text text text text text text text text </p>
<div class="feedback">FIXED BLOCK</div> </body>
Использование position
Значение absolute свойства position также выводит элемент из потока, но в отличие от fixed слой прокручивается вместе с содержимым. Кроме этого, существенное влияние на позицию оказывают свойства родителя. Возможны два основных варианта.
1.Родитель отсутствует (его роль выполняет <body>) или у родителя не задано свойство position.
2.У родителя элемента установлено свойство position в значении absolute или relative.
В первом случае все просто, элемент ведет себя как в примере 1, за исключением того, что не закрепляется строго на одном месте, а может прокручиваться одновременно со страницей. Во втором варианте положение элемента задается относительно родителя.
.layer1 {
background: green; width: 117px; height: 112px; position: absolute; right: 5%; bottom: 0;
}
.layer2 {
background: red; color: #fff; width: 57px; padding: 5px; position: absolute; bottom: 30px;
}
<body>text text text text text text text text text text text text <div class="layer1"><div class="layer2">
absolute position position </div></div>
</body>
float
Определяет, по какой стороне будет выравниваться элемент, при этом остальные элементы будут обтекать его с других сторон. Когда значение свойства float равно none, элемент выводится на странице как обычно, при этом допускается, что одна строка обтекающего текста может быть на той же линии, что и сам элемент.
Синтаксис
float: left | right | none | inherit
Значения
left - Выравнивает элемент по левому краю, а все остальные элементы, вроде текста, обтекают его по правой стороне.
right - Выравнивает элемент по правому краю, а все остальные элементы обтекают его по левой стороне.
none - Обтекание элемента не задается. inherit - Наследует значение родителя.
Использование float
Свойство float превращает элемент в плавающий, при этом он прижимается к левому или правому краю родителя, а текст его обходит с других сторон. В отличие от абсолютно позиционированных плавающие элементы не получится заставить встать в точно заданную точку, но они имеют ряд примечательных характеристик. Настолько, что свойство float для верстки стало использоваться повсеместно. Перечислим лишь ряд возможных приложений:
●галереи небольших фотографий;
●двух и трехколоночные макеты;
●горизонтальные меню;
●иллюстрации в тексте;
●многоколоночный текст.
<style type="text/css">
.right {
float: right; background: green; width: 117px; height: 112px;
}
</style>
.......
<div class="right">float right</div> <p>text text text text text text text text text text text text text text text </p>
Девять правил float-элементов:
1.Плавающие элементы не могут выходить за край своего контейнера-родителя.
2.Каждый плавающий элемент будет отображаться справа или ниже от предыдущего при float:left, либо слева и ниже, при float:right.
3.Блок с float:left не может быть правее, чем блок с float:right.
4.Плавающий элемент не может выходить за пределы верхней границы своего контейнера.
5.Плавающий элемент не может располагаться выше, чем родительский блок или предыдущий плавающий элемент.
6.Плавающий элемент не может располагаться выше, чем предыдущая строка inlineэлементов
7.Плавающий блок должен быть расположен как можно выше.
8.Один плавающий элемент, следующий за другим, не может выходить за пределы своего контейнера — происходит перенос на следующую строку.
9.Блок с float:left должен быть расположен как можно левее, а с float:right — как можно правее.
Использование float
Допустим, нам нужно сделать отступ в 20 |
Правильно вот так: |
|
пикселей между блоком и текстом. Вот |
|
|
.right {margin: 20px;} |
||
такая конструкция работать не будет: |
||
|
|
p {margin: 20px;}
Блок находится внутри абзаца! Поэтому и не работает свойство margin.
Использование float
Можно применить float:left к абзацу и указываем абсолютную ширину:
P {
float: left; width: 80px; margin: 20px;
}
Правила, регулирующие
плавающие объекты
По умолчанию каждый элемент списка появится с новой строки. Если применить к каждому float:left, блоки встанут в один ряд с переносом строки:
.left {
float: left; background: green; width: 117px;
height: 112px; margin: 5px;
}
.....
<div class="left"> </div> <div class="left"> </div> <div class="left"> </div> <div class="left"> </div> <div class="left"> </div>
Правила, регулирующие
плавающие объекты
Если блоки разной высоты, то блоки меньшей высоты обтекают только один крайний большей высоты, например: