Справочник по CSS : Тематический указатель : Справочник по свойствам и атрибутам : Позиционирование : position

смотрим также

Материал из Справочник Web-языков

Перейти к: навигация, поиск


Содержание

Атрибут position | Свойство position

Задает тип позиционирования, используемый для элемента.

Синтаксис

HTML { position : sPosition }
Скрипты [ sPosition = ] object.style.position

Используемые значения

sPosition
Строка, которая может определять и принимать одно из следующих значений:
static
Значение по умолчанию. Для элемента не задано специальное позиционирование, он отображается как обычно в соответствии с разметкой документа.
absolute
Элемент относительно позиционирован по отношению к родительскому элементу, для которого тоже задано позиционирование. Если родительский элемент не позиционирован, то элемент позиционируется относительно объекта body, используя свойства left и top.
relative
Элемент позиционируется относительно его текущего местоположения. Положение элемента может регулироваться с помощью свойств left и top.
fixed
Используется в Internet Explorer 7.0 и старше. Элемент "привязывается" к определенной точке рабочей области с помощью свойств left, top, right и bottom и не меняет своего положения даже при пролистывании страницы.

Это свойство читается/записывается для всех объектов, кроме currentStyle (только чтение). Значением по умолчанию является static. Атрибут Каскадных таблиц стилей (CSS) не наследуется.

Замечания

Задание свойству position значения absolute автоматически встраивает элемент в web-документ, не учитывая расположение других элементов на странице. Если другие, ранее описанные элементы, уже находятся на определенных местах, то добавление нового элемента может вызвать их взаимное перекрытие. Такое перекрытие можно контролировать с помощью свойства z-index. У абсолютно позиционированных элементов нет отступов margin, но есть padding и border.

Чтобы определить элементу абсолютное позиционирование, надо помимо задания значения absolute для свойства position определить хотя бы одно из свойств top, bottom, left, или right. Иначе, этим свойствам будут заданы их значения по умолчанию, и элемент будет немедленно отображен на странице после предыдущего объекта в соответствии с правилами HTML.

Если элемент перекрыт другим объектом, причем даже если этот объект невидим, то его нельзя активировать, например, используя мышь. Тоже самое справедливо для позиционированных объектов с отрицательным значением z-index кроме:

  • родительским элементом является объект с прокручиваемым содержимым (это значит, что свойство overflow принимает значение auto или scroll).
  • родительским элементом является позиционированный объект (свойству position задано значение absolute или relative).

Задание свойству position значения relative встраивает элемент в web-документ, но с учетом расположения уже имеющихся в документе элементов. Следующий пример показывает как написать скрипт, чтобы текст, находящийся внутри <span> стал позиционирован относительно (relative) по отношению к предыдущему тексту параграфа.

<p>The superscript in this name 
    <span style="position: relative; 
    top: -3px">xyz</span> is "xyz".</p>

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

Размер контента задает размер объекта и его размещение. Например, задание свойств position и height для объекта div определяет его размещение. В данном случае, размер контента влияет на размер width объекта div.

Internet Explorer 7.0 Значение fixed для позиционирования поддерживается только для страниц с объявленной директивой <!DOCTYPE>.

Примеры

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

<style type="text/css">
.pitem {
	position: static;
}
</style>
<script type="text/javascript">
function fnAbsolute(){
   oSpan.style.position="absolute";
}
function fnRelative(){
   oSpan.style.position="relative";
}
function fnStatic(){
   oSpan.style.position="static";
}
</script>
<p><span id="oSpan" class="pitem">Это <b>афрагмент</b> параграфа текста.</span> 
This is a paragraph of text.</p>
<input onclick="fnRelative()" type="button" value="Relative">
<input onclick="fnAbsolute()" type="button" value="Absolute">
<input onclick="fnStatic()" type="button" value="Static"> 

Стандарты

Это свойство описано в Cascading Style Sheets (CSS), Level 2 (CSS2)

Поддерживаемые браузеры

Internet Explorer 5.0, 6.0, 7.0, 8.0

Opera 7.0, 8.0, 9.5, 9.6, 10.0

Safari 1.2, 2.0, 3.1

Firefox 1.5, 2.0, 3.0, 3.5

Ссылки на источники

https://msdn.microsoft.com/en-us/library/ms531140(VS.85).aspx

https://developer.mozilla.org/en/CSS/position

Добавить страницу в закладки:
РАЗРЕШАЕТСЯ перепечатывать и копировать информацию ТОЛЬКО ПРИ РАЗМЕЩЕНИИ ссылки на оригинал!
(<A href="https://www.spravkaweb.ru/">Справочник Web-языков</A>)
другие проекты
Rambler\'s Top100 Индекс цитирования