Атрибуты. Параметры позиционирования блочного элемента.

  Для позиционирования полей элементов блочных тегов на Web-странице применяются атрибуты стилей позиционирования.
  Относительность позиционирования.
  Атрибуты:
  position - Устанавливает относительность позиционирования поля элемента тега на Web-странице.

Формат:

  • position:
      absolute
      |fixed
      |relative
      |static
      |initial
      |inherit
      |unset

Значения:

  • absolute - При таком позиционировании полю элемента не отводится собственного пространства в поле "родительского" элемента, а только указывается его положение.
      Если хотя бы один из атрибутов left, right, top, bottom определяемого элемента не имеет значение auto, а "родительский" элемент позиционируется не как static, то поле определяемого элемента позиционируется относительно границ поля "родительского" элемента, при этом фиксация происходит соответственно точным значениям атрибутов left, right, top, bottom.
      Значение auto какого-то из этих атрибутов в этом случае устанавливают некие принятые по умолчанию отступы от соответствующих границ поля "родительского" элемента.
      Приоритет фиксации у точных значений left, top, точные значения right, bottom не дадут полю определяемого элемента сместиться правее и ниже их при любом изменении размеров поля "родительского" элемента, даже если для этого потребуется изменение размеров поля определяемого элемента.

      Если все атрибуты left, right, top, bottom имеют точные значения, то поле определяемого элемента получит максимально возможный для него размер (в соответствии со значениями атрибутов стиля max-width и max-height).

      В случае если все атрибуты left, right, top, bottom определяемого элемента имеют значение auto, а "родительский" элемент позиционируется не как static, то поле определяемого элемента фиксируется после следующего перед ним контента в HTML-коде "родительского" элемента, или предшествующего на том же уровне поля элемента, позиционированного как static.
      Поля элементов одного уровня, позиционированных как absolute и следующих друг за другом в HTML-коде с атрибутами left, right, top, bottom со значением auto будут перекрываться.

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

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

      Фиксация поля элемента значением absolute означает, что на одном месте могут быть размещены поля многих элементов, в соответствии с порядком следования в HTML-коде, в зависимости от значения атрибута стиля z-index, и(или) в зависимости от значения атрибута стиля position.

      В случае если поле "родительского" элемента позиционируется значением static, то поле определяемого элемента, позиционированного как absolute, будет фиксироваться также, как поле элемента, позиционированного значением fixed, однако не в границах окна браузера (или фрейма) а в границах HTML-документа визуализированного в этом окне (или фрейме).
      Поэтому поле определяемого элемента будет прокручиваться в случае скроллинга документа в окне браузера (или фрейме) вместе с документом.
  • fixed - При таком позиционировании полю элемента не отводится собственного пространства на Web-странице, а только указывается его положение.
      Если хотя бы один из атрибутов left, right, top, bottom определяемого элемента не имеет значение auto, то его поле позиционируется относительно границ окна браузера (или фрейма), при этом фиксация происходит соответственно точному значению этого атрибута.
      Остальные значения auto в этом случае устанавливают некие принятые по умолчанию отступы от соответствующих границ окна браузера (или фрейма).
      Приоритет фиксации у точных значений left, top, точные значения right, bottom не дадут полю определяемого элемента сместиться правее и ниже их, при любом изменении размеров окна браузера (или фрейма), даже если для этого потребуется изменение размеров поля.
      Если точные значения left, top будут больше соответствующих размеров окна браузера (или фрейма), то поле определяемого элемента будет доступно только увеличением окна браузера (или фрейма).

      Если все атрибуты left, right, top, bottom имеют точные значение, то поле определяемого элемента получит максимально возможный для него размер (в соответствии со значениями атрибутов стиля max-width и max-height).

      Если все атрибуты left, right, top, bottom определяемого элемента имеют значения auto, то его поле позиционируется после следующего перед ним контента в HTML-коде "родительского" элемента, или предшествущего на том же уровне поля элемента, позиционированного как static, и перекроет контент "родителя" следующий за ним.
      При этом, если предшествующий контент "родительского" элемента не войдет в его поле, или в окно браузера (фрейм), и будет доступен скроллингом, то поле определяемого элемента все равно позиционируется после условного окончания предшествующего контента "родительского" элемента в окне браузера (или фрейме) так, как будто бы поле "родительского" элемента и окно браузера (или фрейм) на момент фиксации были безразмерными.
      Поля элементов одного уровня, позиционированных как fixed и следующих друг за другом в HTML-коде с атрибутами left, right, top, bottom со значением auto будут перекрываться.

      Фиксация поля элемента значением fixed означает, что на одном месте могут быть размещены поля многих элементов, в соответствии с порядком следования в HTML-коде, в зависимости от значения атрибута стиля z-index, и(или) в зависимости от значения атрибута стиля position.

      Так как поле определяемого элемента значением fixed фиксируется в окне браузера (или фрейме), то оно никогда не будет прокручиваться вместе с остальным контентом в окне браузера (или фрейме), оставаясь всегда на своем месте, и в определенных случаях его можно будет рассмотреть только увеличив окно браузера.
  • relative - При таком позиционировании может быть задано размещение поля элемента относительно контента поля "родительского" элемента.
      Позиция поля определяемого элемента тега задается атрибутами стиля left, right, top, bottom, которые устанавливают его смещение от условных границ окружающего его контента в HTML-коде "родительского" элемента.
      Значение auto атрибутов left, right, top, bottom в этом случае устанавливает некие принятые по умолчанию отступы от контента, а атрибуты left и right, в самом простом случае, могут устанавливать отступы от левой и правой границ поля "родительского" элемента.

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

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

      Поле определяемого элемента всегда будет находиться в поле "родительского" элемента, и будет прокручиваться вместе с контентом "родителя".
  • static - При таком позиционировании размещение поля элемента относительно контента поля "родительского" элемента определяется позицией его элемента в HTML-коде "родительского" элемента.
      Соответствует значению relative для left, right, top, bottom - auto.
      Нормальное состояние. Наследуется от тега HTML (inherit на самом верхнем возможном уровне).
      В этом случае значения атрибутов стиля left, right, top, bottom не учитываются.
  • inherit - Значение атрибута наследуется от элемента "родительского" тега.
  • initial - Значение атрибута устанавливается в значение по умолчанию.
  •  unset – Значения атрибута приводятся к унаследованным значениям, если таковые есть, в противном случае - к значениям по умолчанию.
  Позиционирование элементов в плоскости экрана.
  Атрибуты для определения позиции в плоскости экрана поля элемента тега применяются только для относительно позиционированных элементов (position не static.)
  Атрибуты:
  
  • left - Устанавливает положение левого края поля элемента.
  • right - Устанавливает положение правого края поля элемента.
  • top - Устанавливает положение верхнего края поля элемента.
  • bottom - Устанавливает положение нижнего поля края элемента.

Формат:

  • left|right|top|bottom:
      auto
      |Размер
      |initial
      |inherit
      |unset

Значения:

  • auto - Положение определяется автоматически исходя из HTML-кода и формата окружающего контента.
      Нормальное состояние. Наследуется от тега HTML (inherit на самом верхнем возможном уровне).
  • Размер - Линейная величина с единицей измерения.
      Границы соответствующего края для отступа зависят от способа позиционирования заданного атрибутом position.
      Возможны отрицательные значения.
  • inherit - Значение атрибута наследуется от элемента "родительского" тега.
  • initial - Значение атрибута устанавливается в значение по умолчанию.
  •  unset – Значения атрибута приводятся к унаследованным значениям, если таковые есть, в противном случае - к значениям по умолчанию.
  Позиционирование элементов "перпендикулярно" плоскости экрана.
  Атрибуты:
  z-index - Устанавливает уровень "слоя" для поля элемента тега на Web-странице.
  Только для позиционированных элементов (position не static.)

Формат:

  • z-index:
      auto
      |Уровень
      |initial
      |inherit
      |unset

Значения:

  • auto - Уровень "слоя" устанавливается автоматически исходя из вложенности и порядка следования элементов в HTML-коде.
      Нормальное состояние. Наследуется от тега HTML (inherit на самом верхнем возможном уровне).
  • Уровень - CSS значение integer - "координата слоя по виртуальной оси Z" от нуля в сторону пользователя.
      При равном значении "ближе" к пользователю разместится поле элемента, который в HTML-коде следует позже. "Дочерний" элемент не может получить уровень ниже или такой же как у "родительского".
  • inherit - Значение атрибута наследуется от элемента "родительского" тега.
  • initial - Значение атрибута устанавливается в значение по умолчанию.
  •  unset – Значения атрибута приводятся к унаследованным значениям, если таковые есть, в противном случае - к значениям по умолчанию.
  Область визуализации абсолютно позиционированных элементов.
  Атрибуты:
  clip - Устанавливает область визуализации поля элемента на Web-странице.
  Только для абсолютно позиционированных (position: absolute или fixed)элементов.
  В поле элемента только в этой области будет видна соответствующая часть контента этого элемента, остальная часть поля станет прозрачной.
  Атрибут clip устарел, лучше использовать атрибут clip-path.

Формат:

  • clip:
      auto
      |Фигура

Значения:

  • auto - Область визуализации равна всему полю элемента. Нормальное состояние. Наследуется от тега HTML (inherit на самом верхнем возможном уровне).
  • Фигура - Область визуализации задаётся CSS значением shape с соответствующими координатами в поле элемента.

Пример position:: ■■■■■■■■■■►

Пример z-index: и clip:

<STYLE>
  #dv1 {width: 450px; height: 160px; border: 2px solid black; overflow: auto; position: absolute;
    font-size: 12px; color: #4169E1; background-color: #F0F8FF; z-index: 2;}
  #dv2 {max-width: 400px; max-height: 200px; font-size: 12px; color: #00008B;
    background-color: #ADD8E6; overflow: auto; z-index: 1;
    border: 2px solid black; position: absolute; left: auto; right: auto; top: auto; bottom: auto}
  #dv3 {max-width: 200px; max-height: 200px; font-size: 10px; position: absolute;
    left: 250px; right: auto; top: 155px; bottom: auto; z-index: 1;}
  .field:hover #dv1 { clip: rect(auto,auto,130,auto);}
  .field:hover #dv2 { z-index: 3;}
</STYLE>
......

<FIELDSET class="field">
  <DIV ID=dv1>
    Жил старик со своею старухой у самого синего моря...
  </DIV>
  <DIV ID=dv2>
    Отпустил он рыбку золотую...
  </DIV>
  <DIV ID=dv3>
    ;Александр Сергеевич Пушкин.
    <BR>“Сказка о рыбаке и рыбке...“
  </DIV>
</FIELDSET>
Пример атрибутов z-index и clip - наведите мышку.
Жил старик со своею старухой у самого синего моря.
Они жили в ветхой землянке ровно тридцать лет и три года.
Старик ловил неводом рыбу, старуха пряла свою пряжу.
Раз он в море закинул невод, пришел невод с одною тиной.
Он в другой раз закинул невод, пришел невод с травой морскою.
В третий раз закинул он невод, пришел невод с одною рыбкой,
С непростою рыбкой, — золотою.
Как взмолится золотая рыбка! Голосом молвит человечьим:
„Отпусти ты, старче, меня в море! Дорогой за себя дам откуп:
Откуплюсь чем только пожелаешь.“
Отпустил он рыбку золотую
И сказал ей ласковое слово:
„Бог с тобою, золотая рыбка!
Твоего мне откупа не надо;
Ступай себе в синее море,
Гуляй там себе на просторе.“
Александр Сергеевич Пушкин.
“Сказка о рыбаке и рыбке...“