position: absolute; абсолютное позиционирование

Пример абсолютного позиционирования

Здравствуйте уважаемые начинающие Позиционированиевеб-мастера.

В этой статье мы познакомимся с ещё одним свойством CSSpsition:absolute, и научимся позиционировать элемент относительно окна браузера, и относительно другого элемента.

А так-же разберём несколько оригинальных решений, реализованных с помощью абсолютного позиционирования.

В начале разберёмся, что такое абсолютное позиционирование относительно окна браузера.

Экраны мониторов, имеют разные высоту, и ширину. Элемент размещённый относительно окна Вашего монитора, на других компьютерах, с другим размером экрана, обязательно сместится с того места, которое Вы ему отвели у себя.

Зато, он будет неизменно располагаться на заданном расстоянии от краев окна браузера, даже если монитор посетителя окажется в три раза больше, или меньше Вашего.

Координаты элемента, при абсолютном позиционировании, задаются свойствами

top  — размер от верхнего края экрана, до верхнего края элемента;

left  — размер от левого края экрана, до левого края элемента;

right  — размер от правого края экрана, до правого края элемента;

bottom  — размер от нижнего края экрана, до нижнего края элемента;

top и left имеют больший приоритет, поэтому в случае противоречия right и bottom игнорируются.

Значения этих свойств могут быть отрицательными, в этом случае элемент смещается в противоположную сторону. Так же он может выйти за пределы экрана.

При абсолютном позиционировании, элемент как бы поднимается над всеми тегами, и становиться независимым (если только у него нет родителя, но об этом чуть ниже)

Поэтому он разместиться именно в тех координатах, которые Вы укажите. Остальные теги, его присутствия просто не заметят.

Пример такого позиционирования в правом верхнем углу станицы, и как видите, хоть элемент и независимый, он прокручивается вместе со страницей.

Вот его код:

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Документ без названия</title>
<style>
div{
position:absolute;
top:40px;
right:10px;
background:#21cccc;
width:200px;
padding:10px;
text-align:center;
border-radius:50px/20px;
box-shadow:5px 5px 3px 1px;
}
</style>
</head>
<body>
<div>Пример абсолютного позиционирования</div>
</body>
</html>

Теперь рассмотрим вариант, когда элемент находится внутри другого элемента, то есть у него есть родитель.

В этом случае позиционирование происходит относительно границ родителя, по ранее описанному принципу. То есть верхняя граница элемента, от верхней границы родителя, и так далее.

В качестве примера абсолютного позиционирования рассмотрим, как украсить шапку сайта дополнительной картинкой.

Допустим у нас есть такая картинка для шапки сайта:

s14

И нам нужно вставить в неё вот такого охотящегося чёртика:

hortic

Так как шапка сайта размещается в блоке header, то и в коде я укажу для картинки этот блок. А вообще-то, подобное действие можно выполнить с любым блоком.

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Документ без названия</title>
<style>
#header{ /*Селектор шапки*/
background-image: url(images/s14.png); /*Загружаем изображение*/
background-repeat: no-repeat; /*Запрет повторения*/
width: 570px; /*Ширина блока по ширине картинки*/
height: 170px; /*Высота блока по высоте картинки*/
}
img{ /*Чёртик*/
position: absolute; /*Позиционируется абсолютно, относительно родителя*/
top: 30px; /*Координата сверху*/
left: 420px; /*Координата слева*/
}

</style>
</head>
<body>
<div id="header">
<img src="images/hortic.gif">
</div>
</body>
</html>

Результат:

Позиционирование в шапке сайта

С таким же успехом можно вывести чёртика за пределы блока header.

Попробуйте увеличить значение left, например, до 600px, и посмотрите результат.

Преимущество абсолютного позиционирования, в этом случае в том, что чёртик не будет мешать другим тегам, которые нужно будет разместить в шапке сайта.

Это прежде всего название, и краткое описание сайта, ну и возможно что-то ещё, типа адреса и телефона.

Ещё один пример абсолютного позиционирования, когда свойство psition:absolute задаётся одновременно, и родителю и элементу.

Допустим у Вас есть папка с фотографиями, и вам время от времени нужно быстро её просматривать.

Создаём список фотографий:

52

И просматриваем:

Абсолютное позиционирование
Абсолютное позиционирование
Абсолютное позиционирование

Фотографии будут открываться при наведении курсора мыши на название снимка.

Код:

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Документ без названия</title>
<style>
ul{ /*Создаём список картинок*/
background: #fdeaa8;
padding: 5px;
border-radius: 5px;
box-shadow: 0px 0px 0px 2px #0ea8f4;
width: 150px; /* Ширина блока*/
list-style: none; /* Убираем маркеры списка*/
font-family: Arial, sans-serif;
font-size: 16px;
}
li p { /*Картинки*/
position: absolute; /*Картинки позиционируются абсолютно */
display: none; /* Скрываем картинки*/
margin-left: 160px; /* Сдвигаем картинки вправо */
margin-top: -20px; /* Сдвигаем картинки вверх */
}
li img {
display: block; /*Картинка блочный элемент */
border-radius: 5px;
box-shadow: 0px 0px 0px 2px #0ea8f4;
}
li:hover p {
display: block; /* При наведении курсора отображается картинка*/
}
.col:hover{
color: #abaab4; /* При наведении курсора меняется цвет текста*/
}
</style>
</head>
<body>
<ul>
<li class="col">Мой дом
<p><img src="images/s8.jpg"> </p>
</li>
<li class="col">Мой автомобиль
<p><img src="images/s9.jpg"></p>
</li>
<li class="col">Моя собака
<p><img src="images/s10.png"></p>
</li>
</ul>
</body>
</html>

Желаю творческих успехов.

Неужели не осталось вопросов? Спросить


Перемена

«Каждой тваре по паре, » — подумал учитель, глядя на опостылевших ему учеников.

Как вставить картинку и текст в отдельный блок < < < В раздел > > > Относительное позиционирование (position:relative)
 

Рекомендую: Готовые HTML шаблоны на русском

Запись опубликована в рубрике CSS основы. Добавьте в закладки постоянную ссылку.
А так же:

7 комментариев на «position: absolute; абсолютное позиционирование»

  1. Николай говорит:

    Большое спасибо! Мне это было просто необходимо для моего сайта!

  2. stariс говорит:

    1. Попробуйте сделать ширину 90% и поэкспериментировать с right и left, дайте им значения отличные от нуля.
    2. Посмотрите в веб-инспекторе какой элемент является родителем того блока который Вы позиционируете, скорее всего это будет html или body, а они бывает выходят за пределы экрана.
    3. Посмотрите в других браузерах, как отображается Ваш блок.
    Если результата не будет, пишите, будем делать следующие шаги.

  3. Михаил говорит:

    В чём может быть причина ? Если попытаться абсолютно cпозиционировать div контейнер с шириной в 100% , то левая или правая сторона-граница div контейнера не видна, такое ощущение, будто она выходит за пределы окна браузера и поэтому не видна.
    ***************************************
    Используемый css коддля div контейнера.
    width: 100%; /* Ширина */
    height: 30px; /* Высота */
    position: fixed;
    right: 0px;
    bottom: 60px;

  4. stariс говорит:

    Насчёт id — согласен, хотя насчёт привязки к скриптам — вопрос. А вот насчёт relative — нет. Может Вы объясните, почему родитель обязательно должен быть position-relative? Зачем его позиционировать относительно? И почему обязательно relative, а не fixed например, или то же absolute? Случаи то разные бывают.

  5. Евгений говорит:

    Если вы задаете элементу position-absolute, относительно родителя, то родитель должен быть position-relative. Идентификаторы id желательно не использовать (если этого не требует привязка к скриптам) , а использовать классы. Моя оценка примерам 3

  6. stariс говорит:

    Я ещё в самом начале так хотел сделать, но не получилось. Дело в том, что при установке «a visited» (посещённая ссылка), подсвечиваться начинают все ссылки, посещённые пользователями, а не только те, которые посетили именно Вы. То же самое и с постами. Подсвечиваются все на которых кто-то сидит в данный момент.
    Но вопрос интересный, и я надеюсь всё-ж найти решение. Осваиваю PHP.

  7. Дмитрий говорит:

    Сайт очень понравился, спасибо автору огромное!!!
    Хочу внести лепту в ваш сайт,
    можно сделать так, что бы вот справа у вас целая колонка ссылок с темами, так сделайте пожалуйста так, что бы подсвечивалась та в которой я сейчас нахожусь — ну например оранжевой и там где уже был, например более бледной, типа уже читал)
    Так будет более понятно , где я был и что читал)
    Спасибо!!!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *