- •Технология css теоретические сведения
- •1. Общие положения
- •2. Встраивание таблиц стилей в документ
- •3. Селекторы (общие положения)
- •4. Селекторы. Параметр class
- •5. Селекторы. Параметр id
- •6. Контекстные селекторы
- •7. Группирование и наследование
- •8. Свойства форматирования шрифтов. Свойство font-family
- •Свойство font-family
- •9. Свойства форматирования шрифтов. Свойство font-style
- •10. Свойства форматирования шрифтов. Свойство font-variant
- •11. Свойства форматирования шрифтов. Свойство font-weight
- •12. Свойства форматирования шрифтов. Свойство font-size
- •13. Свойства форматирования шрифтов. Свойство font
- •14. Свойства форматирования цвета и фона элемента
- •15. Свойства форматирования цвета и фона элемента
- •16. Свойства форматирования текста
- •Если при задании параметров нужно использовать кавычки, то значение свойства style заключается в апострофы.
- •19. Отображение списков
- •20. Отображение списков
- •21. Блоки
- •22. Блоки
- •23. Блоки
- •24. Визуальное форматирование (общие сведения)
- •25. Абсолютное позиционирование
- •26. Абсолютное позиционирование
- •27. Относительное позиционирование
- •28. Относительное позиционирование
- •29. Статическое позиционирование
- •30. Визуальные эффекты
- •31. Визуальные эффекты
- •32. Визуальные эффекты
26. Абсолютное позиционирование
Значения свойств top и left влияют на начало отсчета положения абсолютно позиционированного элемента. Если их значения установлены, то именно они и используются для смещения элемента относительно начала позиционированного элемента-родителя:
left - для задания расстояния в пикселях от левого края окна (х-координата),
top - для задания расстояния в пикселях от верхнего края окна (у-координата).
Если значение свойства top не задано или установлено равным auto, то верхний край элемента совмещается с верхом последней строки текста родителя, если последний содержит текст, или выравнивается по верхнему краю родителя, если последний является изображением. Аналогично, если значение свойства left не задано или установлено равным auto, то левый край элемента совмещается с концом последней строки текста родителя, если последний содержит текст, или выравнивается по правому краю родителя, если последний является изображением.
Проиллюстрируем это на конкретном примере. Возьмем текст примера, результат просмотра которого в браузере приведен на предыдущем шаге на рисунке 3, и изменим его следующим образом:
<HTML>
<HEAD>
<TITLE>Абсолютное позиционирование</TITLE>
</HEAD>
<BODY>
<SPAN STYLE="position:relative;
background-color:#90EE90">
Родитель, позиционированный относительно!
<IMG SRC="G.gif" STYLE="position:absolute; top:auto; left:auto;">
</SPAN>
</BODY>
</HTML>
Результат просмотра этого документа в браузере изображен на рисунке 1.
Рис.1. Изменение положения абсолютно позиционированного при отсутствии параметров top и left
27. Относительное позиционирование
Относительно позиционированные и статически позиционированные элементы после изъятия из исходного текста документа всех абсолютно позиционированных элементов (вместе с их потомками), образуют непрерывный поток отображения, в котором каждый последующий элемент позиционируется относительно конца предыдущего. Относительно позиционированные элементы, являющиеся потомками абсолютно позиционированных элементов, также позиционируются в конец своего элемента-родителя. Рисунок 1 демонстрирует отображение в окне браузера последовательности относительно позиционированных элементов страницы:
Рис.1. Относительно позиционированы все элементы
Текст данного примера:
<HTML>
<HEAD>
<TITLE>Относительное позиционирование</TITLE>
</HEAD>
<BODY>
<SPAN STYLE="position:relative;
background-color: #90EE90">
Это изображение </SPAN>
<IMG SRC="G.gif" STYLE="position: relative;">
<SPAN STYLE="position:relative;
background-color: #90ff10";>
является изображением буквы "Ж".
</SPAN>
</BODY>
</HTML>
Каждый элемент потока позиционируется в конец предыдущего. Если позиционирование элемента-изображения изменить на абсолютное, то он будет выведен из стандартного потока отображения, а оставшиеся относительно позиционируемые элементы будут отображаться друг за другом в едином потоке (рисунок 2).
Рис.2. Изображение перекрывается третьим элементом
Вот текст документа:
<HTML>
<HEAD>
<TITLE>Относительное позиционирование</TITLE>
</HEAD>
<BODY>
<SPAN STYLE="position:relative;
background-color: #90EE90">
Это изображение </SPAN>
<IMG SRC="G.gif" STYLE="position: absolute;">
<SPAN STYLE="position:relative;
background-color: #90ff10";>
является изображением буквы "Ж".
</SPAN>
</BODY>
</HTML>
Здесь же видно, что последовательность отображения элементов определяется их заданием в исходном файле документа: элемент <IMG> задан вторым, поэтому он отображается раньше третьего элемента и перекрывается последним.