Html absolute: Позиционирование элементов

Содержание

Position (absolute, relative и fixed) — способы позиционирования Html элементов в CSS (правила left, right, top и bottom)

Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Сегодня мы поговорим о принципах позиционирования Html элементов с помощью CSS правил Position (со значениями absolute, relative и fixed) и свойств, задающих смещение left, right, top и bottom. Видите звездочку в левом нижнем углу? Дочитав статью до конца, вы узнаете как она туда попала.

В прошлой статье мы поговорили про одно из основополагающих CSS правил Float, которое помогает разорвать нормальный поток идущих друг за другом в Html коде тэгов. Оно позволяет осуществлять блочную Div верстку, на которой сейчас в основном и базируется сайтостроение. Но не Float единым…

Position relative — относительное позиционирование

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

У него имеется четыре возможных значения (static | relative | absolute | fixed). Откуда мы это можем узнать? Ну, конечно же, из спецификации, которая выложена на официальном сайте отца-основателя современной сети интернет Тима Бернерса-Ли:

По умолчанию используется значение position: static. Т.е. в нормальном потоке два CSS правила, способных его разорвать, имеют значения по умолчанию static и float:none. Как только одно из этих значений изменится — нормальный поток Html кода в этом месте будет нарушен, потому что теперь этот тег может совершенно по-другому взаимодействовать со своими соседями или вообще даже не взаимодействовать.

Давайте начнем рассмотрение с относительного позиционирования, которое будет соответствовать значению position: relative. После того, как мы пропишем его для какого-либо тэга, у нас появится возможность задавать смещение (осуществлять позиционирование) для этого элемента с помощью дополнительных правил Left, right, top и bottom (влево, вправо, вверх и вниз, соответственно):

По умолчанию для всех четырех используется значение Auto. Когда мы прописываем для какого-либо тега правило position: relative, то значения отступов со всех сторон сбрасываются в ноль и вам предоставляется возможность самим задать их.

Нужно понимать как задаются отступы. Например, left: 400px означает отступ от левой стороны вправо на соответствующую величину, а top: 100px — от верхней стороны вниз. Если укажите отрицательные значения Left, right, top и bottom, то элемент будет двигаться в противоположную сторону (например, top — наверх, а Left — влево).

Давайте рассмотрим использование relative для плавающего элемента. Пусть у нас имеются два Div контейнера, которые мы подкрасим для наглядности разным цветом фона с помощью background.

Первый контейнер мы изначально заставим плавать влево с помощью соответствующего свойства, а т.к. он будет пустой, то мы зададим ему высоту и ширину с помощью width и height (и отступы с помощью margin):

<div></div>
<div>text text ...</div>

В результате мы получим примерно такую картину маслом:

Первый контейнер, как и ожидалось, плавает влево. При этом сам по себе второй блок этого как бы и не замечает (ибо он блочный — display: block), но зато это замечает строчный элемент текста, который обтекает наш плавающий блок.

Теперь давайте добавим к CSS правилам для первого контейнера position: relative и зададим отступы слева и сверху с помощью Left и top:

<div></div>
<div>text text ...</div>

В результате мы увидим, что наш плавающий элемент сдвинулся в соответствии с заданными отступами:

Обратите внимание, что текст по-прежнему продолжает его обтекать так, как будто бы он все еще стоит на своем месте. Т.е. многие Html теги при своем построении считают, что он находится на своем законном месте (без учета заданных нами в правилах Left и top сдвигов).

Но так будут делать не все тэги, иначе бы мы не увидели никаких изменений. Ближайший предок с прокруткой (в нашем случае это будет тег Html, т.е. фактически область просмотра) эти изменения заметит.

Принцип действия relative не сложен, но не совсем понятно для чего это можно будет применить на практике. На самом деле это правило используется в связке с position absolute, и вот в таком виде оно находит очень даже большое применение при верстке сайтов и макетов. Но обо все по порядку.

Position absolute — абсолютное позиционирование в CSS

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

Но сначала посмотрим на эту конструкции еще без добавления «position: absolute». При этом для подчеркивания строчности Span добавим ему высоту, которая все равно не применится, а CSS код на сей раз добавим для разнообразия не через атрибут, а через тег style внутри конструкции Head:

<head>
<style type="text/css">
#abs{
	background:#FFC0C0;
	margin-left: 100px;
	}
#abs span{
	background:#C0FFC0;
	height:100px;
}
</style>
</head>
<body>
	<div>Первое <span>второе</span> и третье</div>
</body>

Для Div мы еще и отступ слева задали в 100px. Ну, а теперь посмотрим, что же изменится, если мы зададим нашему строчному тэгу Span абсолютное позиционирование путем добавления CSS правила position absolute:

#abs span{
	background:#C0FFC0;
	height:100px;
	position:absolute;
}>

Произошло странное. Судя по тому, что к Span применилось свойство height:100px — он перестал быть строчным тегом. Потом у нас, очевидно, состыковались друг с другом фрагменты «первое» и «третье», как будто бы элемента со словом «второе» между ними уже не существует. Именно так и работает абсолютное позиционирование в CSS.

Но давайте разберем все по пунктам при задании элементу свойства «position: absolute»:

Тег, для которого прописывается это правило, становится блочным
Размеры этого блока будут определяться содержащимся в нем контентом (если вы не зададите их явно с помощью width и height).
Также как и для плавающих элементов (с прописанных Float), в случае применения к тегу «position: absolute», эффект Margin-colloapse для таких тэгов проявляться не будет. Т.е. ему никто не сможет передать свои вертикальные отступы и он никому передать их не сможет тоже (ни с кем не делится вертикальными отступами).
Если вы вспомните предыдущую статью из рубрики «Справочника CSS», то увидите, что все эти три пункта наблюдались и при создании плавающих элементов с помощью Float.
Поэтому, если для какого-либо тега уже было задано Float, но затем для него же прописали «position: absolute», то первое браузером (именно он отвечает за разбор кода) сбрасывается в None (значение по умолчанию), ибо нет смысла реализовывать две одинаковых модели.
Тег с прописанным «position: absolute» не взаимодействует ни с какими другими элементами Html кода кроме ближайшего родителя с прокруткой. Все остальные теги в коде элемент с абсолютным позиционированием просто-напросто не замечают (и это видно из нашего примера)

Это все хорошо, но ведь с помощью «absolute» мы должны осуществлять абсолютное позиционирование. Ну, собственно, это так и есть на самом деле. В купе с ним мы можем использовать все те же четыре CSS правила: Left, right, top и bottom. Как они будут работать при абсолютном позиционировании?

Они по-прежнему будут задавать смещение, но смещение уже не относительно текущего положения элемента, а относительно границ его контейнера.

А само понятие контейнера для абсолютно спозиционированных элементов будет отличаться от общепринятого. Из предыдущих статей вы, наверное, помните, что контейнером для тега Html является область просмотра, а для всех остальных — область контента родителя. У тэга с прописанным position absolute это будет не так.

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

Допустим, если мы задали только абсолютное позиционирование, но не прописали никаких значений для правил Left, right, top и bottom, то для них будет использоваться умолчательное значение Auto и такой элемент останется стоять на своем месте (как и у нас на последнем скриншоте). Тут должно быть все понятно.

В CSS используется структура предков и потомков, о которой я уже довольно подробно писал в статье про CSS селекторы псевдоклассов. Наша задача, при определении контейнера для тега с абсолютным позиционированием, будет заключаться в поиске предка с position, имеющим значение отличное от static (т.е. когда это было явно задано).

В нашем примере ни одному из предков тега Span мы не прописывали position, поэтому дойдя до самого верха (тэга Html) мы на этом и остановимся. Давайте зададим нулевые отступы для рассмотренного чуть выше примера и убедимся в своей правоте:

#abs span{
	background:#C0FFC0;
	height:100px;
	position:absolute;
 left:0;
 top:0;
}>

В итоге абсолютно спозиционированный тег прижался к нулевой точке отсчета области просмотра. Но мы вольны сами выбирать контейнер для элемента с прописанным position absolute. Как же это можно сделать?

Связка position absolute и relative в Div верстке

Ну, а почему бы для этого не использовать CSS правило «position: relative». Пропишем его в нужном теге предка (который станет в итоге контейнером для абсолютно спозиционированного элемента), а значения Left, right, top или bottom прописывать не будет, тем самым, фактически, вообще не внеся никаких изменений в положение данного предка (он останется в нормальном потоке), но назначив его контейнером и началом отчета для нашего абсолютного позиционирования.

Если мы пропишем «relative» для тега Body, то наша картинка чуть-чуть изменится:

<body>
	<div>Первое <span>второе</span> и третье</div>
</body>

Видите, появились характерные отступы говорящие о том, что теперь за точку отсчета берется левый верхний угол тэга Body. Помните, что в умолчательных значениях для этого тега прописаны отступы margin в 8 пикселей, которые мы и наблюдаем:

А теперь давайте в дополнение к уже проделанному пропишем «position: relative» и для контейнера Div, внутри которого и живет тег Span:

<style type="text/css">
#abs{
	background:#FFC0C0;
	margin-left: 100px;
	position: relative;
	}
#abs span{
	background:#C0FFC0;
	height:100px;
	position:absolute;
	left:0;
 top:0;
}
</style>
</head>
<body>
	<div>Первое <span>второе</span> и третье</div>
</body>

Как видим, картина поменялась. Несмотря на то, что relative прописано и для Body, и для Div, контейнером для абсолютно спозиционированного Span стал именно Div, т.к. он является первым предком, у которого значение position отлично от static.

Причем, если мы пропишем для нашего Div еще и border с padding, а также margin, то увидим, что в качестве контейнера при абсолютном позиционировании будет использоваться область контента с имеющимися внутренними отступами:

#abs{
	background:#FFC0C0;
	margin-left: 100px;
	position: relative;
	border:12px dotted #ccf;
	padding:20px;
	}

Как видно из примера, точка отсчета расположена в левом верхнем углу внутри рамки элемента (по внутренней ее границе). Отсюда следует правило, что для тэгов с «position: relative» (которые являются контейнерами при абсолютном позиционировании) рамку лучше будет вообще не использовать во избежании эксцессов.

Отступы (смещение) Left, right, top и bottom можно задавать не только в абсолютных единицах (читайте про размеры в CSS), но и в процентах, которые будут браться от ширины (left и right) и высоты (top и bottom) полученного контейнера. Т.е. «top:100%» будет соответствовать 100% высоты контейнера, а «left:100%» — 100% от его ширины.

И именно описанное выше взаимодействие я имел в виду, говоря про связку position absolute и relative. У нас благодаря этому появляется возможность самим выбирать контейнер или же, другими словами, точку отсчета при абсолютном позиционировании. Для чего же на практике используют эту связку?

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

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

Для выпадающего меню делают примерно следующее. При наведении курсора мыши (задается в CSS с помощью селектора псевдокласса hover) на корневой пункт меню появляется абсолютно спозиционилованный с помощью «absolute» элемент (вложенные пункты меню, созданные на основе обычного списка). Появляется этот выпадающий список рядом с корневым пунктом меню по той простой причине, что в нем прописан position: relative. Все.

Position fixed — привязка к области просмотра

Последним способом позиционирования является «position: fixed». Рассмотренные ранее способы были рассчитаны на размещение относительно каких-либо элементов Html кода. Но если мы начинаем прокручивать страницу, то и ее теги (даже имеющие абсолютное или относительное позиционирование) перемещаются вверх (или вниз).

А вот при использовании fixed такого уже происходить не будет. Спозиционирванный таким образом элемент всегда будет находиться в одном и том же положении в области просмотра, вне зависимости от прокрутки веб страницы. Вы, наверное, такие варианты уже встречали на сайтах. Например, на подобном эффекте построена работа довольно популярного плагина для WordPress под названием Simple Counters.

Для тэга с прописанным position:fixed контейнер никто не ищет, ибо им является сама область просмотра. Именно в этом заключается отличие от «absolute», а все остальное у них совпадает. Блоки с фиксированным размещением при прокрутке страницы ведут себя так, как будто это элементы интерфейса окна вашего браузера (они всегда под рукой).

Таким образом реализуются, например, панели инструментов, выпадающие панели с возможностью оставить отзыв и т.п. вещи. В качестве примера на этой странице я задал position: fixed для маленькой картинки в левом нижнем углу вашего экрана (области просмотра):

<img src="https://ktonanovenkogo.ru/wp-content/themes/Organic/images/list_star.png" />

На сегодня все, в следующей статье мы поговорим уже про CSS правило z-index, которое применимо только к уже спозиционированным элементам кода, т.е. для которых прописаны либо fixed, либо relative, либо absolute.

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

Использую для заработка

Рубрика: CSS за 10 уроков

Позиционирование элементов в HTML и CSS

С помощью простого HTML не получится создать красивый сайт. Каждый из них имеет свой уникальный дизайн. Для его создания используется стилизация, с помощью CSS стилей.

Обычно стилизацию проходит абсолютно каждый элемент веб-страницы. К каждому применяются стили для изменения цвета, теней, рамок, шрифта.

Однако перед тем, как подобрать необходимый дизайн, элемент сначала нужно правильно расположить. Для этого используются свойства позиционирования, а именно свойство {position}.

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

Позиционирование HTML/CSS — виды?

Свойство {position} имеет целый ряд заданных значений, которые по-разному влияют на то, как именно будет располагаться элемент относительно страницы.

Существует 4 основных типа позиционирования элементов в CSS:

position: absolute;

position: relative;

position: fixed;

position: static.

Все они могут использоваться для горизонтального и вертикального позиционирования.

Относительное позиционирование. Свойство position: relative

Одно из самых часто используемых значений позиционирования в CSS. Использование данного значения задает не полное, а именно относительное позиционирование относительно внешнего блока. Это означает что его границы могут изменяться с помощью свойства <padding>.

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

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

Работают не все свойства перемещения по координатам. Всего их 4:

<Top> — указывает расположение элемента относительно верхней части блока.

<Bottom> — располагает блок относительно нижнего края.

<Right> — задает расположение относительно правой границы внешнего блока.

<Left> — перемещает элемент относительно левой части внешнего контейнера.

Если вы сделаете запись из 4 свойств: <top>, <bottom>, <left>, <right>, то будут работать только первые заданные свойства. То есть, <top> сработает раньше, чем <bottom>, а <left>, раньше чем <right>.

Ещё одним плюсом использования такого типа позиционирования является возможность использования свойства z-index. За счет этого относительное позиционирование в css лучше всего подходит для слоевой верстки.

Данное свойство прекрасно подойдет для позиционирования картинок, кнопок, таблиц и других блоков.

Абсолютное позиционирование. Значение <absolute>

<!doctype>
<html>
    <head>
        <meta charset="utf-8">
        <title>Test Page</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div>
            <div>
            
            </div>
        </div>
    </body>
</html>

body{
    color: darkgreen;
    background: red;
    margin: 0 auto;
    height: 250vh;
}
#content{
    position: fixed;
    height: 100px;
    width: 100%;
    background: black;
}
.block{
    position: absolute;
    background: green;
    height: 50px;
    width: 50px;
    top: 40%;
    left: 10%;
}

Такой тип позиционирования блоков в css используется нередко. Он имеет несколько отличий от первого.

Он имеет не относительное а абсолютное позиционирование относительно родительского блока. Но по умолчанию он позиционируется относительно всей страницы. Это связано с тем, что все элементы по умолчанию имеют свойство {position: static}.

Название значение absolute говорит за себя, оно располагает задает элементу абсолютное позиционирование, что отличается от значения relative по целому ряду признаков.

Если не задать для его родителя свойство {position: relative или fixed}, то элемент будет расположен относительно всей страницы.

Чтобы элемент имел абсолютное позиционирование относительно какого-либо конкретного блока, то для его родителя нужно задать свойство {position: relative}.

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

Браузер воспринимает границы элемента так, как будто его не существовало вовсе. Из-за этого он не может быть перекрыт свойством z-index.

Для того, чтобы перемещать его по странице используются свойства <top>, <right>, <bottom> и <left>.

С его помощью намного проще задать позиционирование элементов по центру в css.

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

Стандартное статическое позиционирование. Значение static

Это стандартное позиционирование html элементов. Оно стоит по умолчанию для всех элементов, которые расположены на странице.

Его также можно использовать для удаления позиционирования. По сути, {position: static} является отменой позиционирования.

Такой тип позиционирования не позволяет использовать свойство z-index. Он располагает элементы в таком порядке, в каком они описаны в HTML документе.

Фиксация элемента. Position: fixed

{Position: fixed} или зафиксированное позиционирование. Который чаще всего используется при создании шапки и футера страницы. Может использоваться для создания блоков с рекламой.

body{

color: darkgreen;

background: red;

margin: 0 auto;

height: 250vh;

}

#content{

position: fixed;

height: 100px;

width: 100%;

background: black;

}

.block{

position: absolute;

background: green;

height: 50px;

width: 50px;

top: 40%;

left: 10%;

}

body{
    color: darkgreen;
    background: red;
    margin: 0 auto;
    height: 250vh;
}
#content{
    position: fixed;
    height: 100px;
    width: 100%;
    background: black;
}
.block{
    position: absolute;
    background: green;
    height: 50px;
    width: 50px;
    top: 40%;
    left: 10%;
}

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

Для таких элементов создается отдельный поток элементов. В первом потоке содержатся элементы, которые не зафиксированы на странице. Во втором — контент имеющий свойство {position: fixed}.

Position: inherit и position: initial.

Первое значение задает наследственное свойство. Элемент будет иметь такое же позиционирование, как и его блок-родитель.

Второе значение задает стандартное позиционирование. По сути, то же самое что и {position: static}.

Свойства перемещения

Давайте подробно рассмотрим свойства отвечающие за передвижение элементов. Они распространяются на все элементы не имеющие свойство {position: static}.

Как мы уже говорили: существует всего 4 свойства — <top>, <right>, <bottom>, <left>. Все они могут принимать разные значения.

Первое значение — <auto>, которое по умолчанию равно 0. Второе — точное значение, может измеряться в процентах, rem, em, vh и других величинах.

Заключение

Надеемся что данная статья была для вас полезна. Теперь вы узнали все аспекты работы свойства position, а также знаете как его применять.

Для практики:

Создайте шапку, которая будет закреплена и не будет теряться при перемещении скролла.

Создайте футер, который не будет исчезать при прокрутке страницы.

В центре создайте 3 блока, которые будут иметь абсолютное позиционирование. Можете эти блоки для вставки картинок.

Теги:

Наложение (position: absolute;) | CSS примеры

Элемент с position: absolute; смещается на расстояние, указанное в свойствах top, right, bottom, left, от края ближайшего родителя с position не static. Передвинуть его относительно своего расположения можно с помощью margin и transform. Размещение элемента над другими элементами правится с помощью свойства z-index.

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

Поместить элемент над другими элементами, убрав его из потока

Элемент с position: absolute; не влияет на размер родителя.

Элемент с position: absolute; не влияет на положение соседей: цифры 20, 21, 22, … смещаются к цифре 19.

Расположить элемент с `position: absolute;` относительно границы ближайшего родителя с `position` не `static`

top

bottom

родительский элемент
position: relative;

дочерний элемент position: absolute;

left

right

Свойства top, right, bottom, left могут иметь как положительные, так и отрицательные значения в любых единицах измерения, а также в процентах. По умолчанию у них установлено значение auto.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 Элемент 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39

<style>
.raz {
  position: relative;
  background: mistyrose;
}
.absolute {
  position: absolute;
  top: 0;
  background: lightpink;
}
</style>

<div>
  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 
  <span>Элемент</span>
  20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39
</div>

Если свойство border задано ближайшему родителю с position не static, то элемент смещается относительно внутреннего края рамки, созданной этим свойством.

Значения свойств top и bottom в процентах рассчитываются от высоты за минусом border-top-width и border-bottom-width ближайшего родителя с position не static. Значения свойств left и right в процентах рассчитываются от ширины за минусом border-left-width и border-right-width ближайшего родителя с position не static.

Использование свойств top или bottom, left или right зависит от конкретной ситуации.

1 2 3 4 5 6 7 8 9 10

11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27Элемент28 29 30 31 32 33 34 35 36 37 38 39 40

41 42 43 44 45 46 47 48 49 50

<style>
.raz {
  position: relative;
  border: 5px solid red; 
}
.absolute {
  position: absolute;
  top: -5px;
  background: lightpink;
}
</style>

<div>
  11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
  <span>Элемент</span>
  28 29 30 31 32 33 34 35 36 37 38 39 40
</div>

Ширина и высота элемента с `position: absolute;` относительно размера ближайшего родителя с `position` не `static`

Ширина элемента с position: absolute; без явно заданного значения устанавливается по содержимому. Элементы с display не block и position: absolute; ведут себя как элементы с display: block; и position: absolute;.

Без явно заданной ширины и/или высоты размер элемента определяется расстоянием от left не auto до right не auto и/или от top не auto до bottom не auto .

Стили, чтобы растянуть блок на всю ширину и высоту родителя без border, но с position не static:


  left: 0;
  right: 0;
  top: 0;
  bottom: 0;



  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;

С ограниченной шириной и/или высотой расстояние от left не auto до right не auto и/или от top не auto до bottom не auto определяет область, в рамках которой может перемещаться элемент с margin: auto; . Если расстояние от left не auto до right не auto меньше width, то свойство right игнорируется .

Свойство height в процентах не заменяется на height: auto;, даже когда ближайший родитель имеет height: auto;.

Блок с `position: absolute;` внутри ближайшего родителя с `position` не `static` и `overflow` не `visible`

Значение overflow отличное от visible у ближайшего родителя с position не static прячет выходящую за границы часть дочернего элемента с первого экрана видимости. Если у ближайшего родителя с position не static и overflow: auto; не ограничена ширина и высота, то при соответствующем direction появляется полоса прокрутки, которая изначально скрывает только выступающий элемент с position: absolute;.

Позиционирование вложенного элемента относительно родителя

Родитель с position: static; пропускается. Если нет родителя с position не static, то положение элемента рассчитывается относительно границы области просмотра окна браузера .

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

Родитель с position: static; и overflow не visible, стоящий внутри позиционированного родителя, не прячет содержимое потомка с position: absolute;.

Свойства width, margin и padding в процентах рассчитываются от ширины за минусом border-left-width и border-right-width ближайшего родителя с position не static.

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

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

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

В этой статье мы познакомимся с ещё одним свойством CSS — psition: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>

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

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

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

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

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

Так как шапка сайта размещается в блоке 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> <img src="images/hortic.gif"> </div> </body> </html>

Результат:

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

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

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

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

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

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

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

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

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

Код:

<!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>Мой дом <p><img src="images/s8.jpg"> </p> </li> <li>Мой автомобиль <p><img src="images/s9.jpg"></p> </li> <li>Моя собака <p><img src="images/s10.png"></p> </li> </ul> </body> </html>

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

Перемена

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

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

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

В данном уроке мы с вами разберем абсолютное позиционирование
элементов. Оно позволяет располагать элементы по указанным
координатам страницы. Например, можно расположить элемент
в позицию 100px сверху страницы и 200px слева. Элемент
переместится туда, не взирая на то, что там будут располагаться
другие элементы и просто станет поверх их. Говорят, что при
этом элемент выпадает из нормального потока документа:
все остальные элементы будут вести себя так, будто нашего
элемента нет.

Для того, чтобы сделать элемент абсолютно спозиционированным,
этому элементу необходимо задать свойство position в значении
absolute. Кроме этого свойства, нужны еще два: одно будет
задавать координату по вертикали, а второе — по горизонтали.

Для вертикали нужно задать отступ или сверху, или снизу. Отступ
сверху задает свойство top, а отступ снизу — свойство bottom.
Для горизонтали нужно задать отступ или слева, или справа. Отступ
слева задает свойство left, а отступ справа — свойство right.

Давайте посмотрим на примерах.

Пример

Для начала давайте просто сделаем два блока
без позиционирования (обратите внимание на то, что
элементы не прижаты к краю окна, так как body имеет
margin по умолчанию):

<div></div> <div></div>
#elem1 { width: 200px; height: 200px; border: 1px solid red; } #elem2 { width: 100px; height: 100px; border: 1px solid green; }

Пример

Давайте теперь зеленому блоку зададим абсолютное
позиционирование, поставив его в позицию сверху 150px
и слева 100px:

<div></div> <div></div>
#elem1 { width: 200px; height: 200px; border: 1px solid red; } #elem2 { position: absolute; top: 150px; left: 100px;