Абсолютное позиционирование.
Принципиально другой механизм заключается в полном извлечении (выбрасывании) элемента из потока и размещении его в указанной позиции - относительно контейнера.
<style type="text/css">
body {
padding: 0;
margin: 0;
}
div {
border: solid 1px blue;
padding: 4px;
}
.static {
color: Blue;
padding: 2em;
}
.abs {
position: absolute;
top: 0px; right: 0px;
color: Red;
border: solid 1px red;
}
</style>
...
<div class="static">
Это текст в обычном (статически позиционированном) контейнере div - Lorem ipsum...
<div class="abs">
Этот контейнер div позиционирован абсолютно вправо (top: 0px; right: 0px;) - Lorem ipsum dolor sit amet
</div>
</div>
Листинг 6.2. Абсолютно позиционированный блок в правом верхнем углу (html, txt)
Позиционирование на основе плавающих элементов. Центрирование Позиционирование на основе плавающих элементов.
Не существует такого вида позиционирования как "плавающий", и "плавающие" элементы должны быть позиционированы статически (что автоматически достигается при отсутствии определения свойства position). Однако свойство float позволяет модифицировать нормальный поток ещё одним способом. "Плавающий" (floating) элемент примыкает к левой (float:left) либо правой (float:right) границе своего контейнера, а последующие элементы (как блочные, так и строчные) обтекают его с противоположной стороны. Это нашло чрезвычайно широкое применение в CSS-вёрстке (об этом говорится в лекции 10).
div {
width: 40%;
float: left;
margin: 3px;
padding:3px;
border:solid 1px blue;
color:Blue;
}
...
<div>
Это плавающий контейнер div - Lorem ipsum... </div>
<div>
Это плавающий контейнер div - Lorem ipsum ...</div>
Листинг 6.4. Позиционирование на основе плавающих элементов. Плавающий блочный элемент и обтекающий его блочный элемент (html, txt)
Рис. 6.4. Плавающий блочный элемент и обтекающий его блочный элемент
.floating {
float: right;
width: 40%;
margin-right: 3px;
padding: 3px;
border: solid 1px blue;
color: Blue;
}
...
<div>
<div class="floating">
Это плавающий контейнер div - Lorem ipsum...
</div>
Это текст, обтекающий плавающий контейнер - Lorem ipsum ...
</div>
Листинг 6.5. Плавающий блочный элемент и обтекающий его слева текст (html, txt)
Упражнения.
Уберите указание ширины контейнеров. Почему пропал эффект плавающей разметки?
Добавьте третий контейнер, добейтесь размещения всех контейнеров в один горизонтальный ряд.
Что произойдёт, если упаковать все div-контейнеры в ещё один div-контейнер?
В примере с обтекающим текстом увеличьте отступ для плавающего контейнера (чтобы обтекающий его текст располагался дальше от рамки). Контейнер в рамке не должен опуститься вниз.
Рис. 6.5. Плавающий блочный элемент и обтекающий его слева текст
Центрирование элементов на странице
Если задать блочному элементу значение auto в свойствах margin-left и margin-right, то он центрируется по горизонтали в своём контейнере. При этом у элемента должна быть задана ширина. Для старых браузеров (IE5-) этот приём не срабатывает, и тогда применяются менее изящные способы. Чтобы центрировать строчный элемент (например, img), его обычно помещают в блочный (либо назначают ему свойство display:block, тем самым делая блочным его самого).
Для вертикального центрирования применяют другую технологию: позиционируют блочный элемент абсолютно левым верхним углом в центр экрана (top:50%; left:50%;) и затем смещают влево и вверх путём задания отрицательных отступов.
div {
margin-left: auto;
margin-right: auto;
width: 300px;
background: #ccc;
}
...
<div>
Если задать блочному элементу значение auto в свойствах margin-left и
margin-right, то он центрируется по горизонтали в своём контейнере...
</div>
Листинг 6.6. Методы центрирования элементов на странице. Горизонтальное центрирование разметки (html, txt)
Рис. 6.6. Горизонтальное центрирование разметки
img {
width:747px;
height:500px;
position:absolute;
top:50%;
left:50%;
margin-top:-250px;
margin-left:-373px;
}
...
<div>
<img src="Cypripedium M.jpg" alt="Cypripedium macranthos Sw" />
</div>
Листинг 6.7. Вертикальное центрирование (html, txt)
Рис. 6.7. Вертикальное центрирование
Упражнение. Разместите в центре страницы изображение с подписью.