CSS урок 12. Позиционирование блоков

Цель урока: Знакомство с понятием позиционирования блоков и элементов в CSS. Фиксированное, относительное и абсолютное позиционирование.

Позиционирование блоков

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

Рассмотрим два элемента, служащих для стилизации:

  1. Тег div — это блочный элемент, который может содержащать другие блоки, такие как, например, изображения и таблицы.
  2. Пример:

    <div>блок текста<img src="…"/></div>
  3. Тег span строчный элемент, содержащий любой текст; элемент можно вставить прямо в строку (встраиваемый элемент). Может заменить собой элементы: FONT, I, B, U и т.п.

Пример:

Текст <span>продолжение текста</span>

Статическое позиционирование

position: static

Статическое позиционирование — это позиционирование элемента по умолчанию. Такой элемент занимает на веб-странице место соответственно своему положению в html-коде, т.е. определенное в нормальном потоке.

Нормальный поток элементов — это отображение элементов соответственно их месту в коде

На статически позиционированный элемент не действуют свойства top, bottom, left и right.

Пример:

div{
  position: static;
}

Фиксированное позиционирование CSS

position: fixed
  • Фиксированно позиционированный элемент удаляется из потока HTML и позиционируется относительно окна браузера. Элемент как будто «плавает» над другими тегами страницы.
  • Он остается на месте при прокрутке страницы.
  • При фиксированном позиционировании необходимо задать координаты расположения элемента.

Установка координат:

  • top | bottom
  • left | right

Значения:
auto | величина | %

Пример:

...
<style type="text/css">
p{
	position: fixed;
	top:30px;
	right:5px;
}
</style></head> 
<body> 
<p>
Я на уроке в первый раз.<br/>
Теперь я ученица.<br/>
Вошла учительница в класс,-<br/>
Вставать или садиться?<br/>
</p>
<div>Блок без стиля</div>

Результат:

фиксированное позиционирование css

Относительное позиционирование CSS

position: relative
  • Относительное позиционирование располагает элемент относительно его нормального положения.
  • При относительном позиционировании обязательна установка координат расположения элемента относительно его нормального положения.

Установка координат:

  • top | bottom
  • left | right

Значения:
auto | величина | %

относительное позиционирование CSS

Пример:

<p>
Я на уроке в первый раз.<br/>
Теперь я ученица.<br/>
Вошла учительница в класс,-<br/>
Вставать или садиться?<br/>
</p>
<div style="position:relative; top:-100px; left:150px; color:red">
Относительно позиционированный блок
</div>

Результат:

Я на уроке в первый раз.
Теперь я ученица.
Вошла учительница в класс,-
Вставать или садиться?

Относительно позиционированный блок

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

position: absolute
  • Абсолютная позиция отсчитывается от ближайшего к элементу родительского контейнера, который имеет позиционирование absolute, relative или fixed (кроме static). Если такой родительский элемент отсутствует, то им считается окно браузера.
  • При абсолютном позиционировании обязательна установка координат расположения элемента относительно его родителя (см. пред. пункт).

Установка координат:

  • top | bottom
  • left | right

Значения:
auto | величина | %

Пример:

h1 {
  position:absolute;
  top: 100px;
  left: 200px
}

Результат:

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

Пример взаимодействия с родительским блоком:

  1. 1
    2
    3
    4
    5
    6
    
    <div style="position:absolute; top: 50px; background-color:#F00">
    	блок 1
    </div>
    <div style="position:absolute; top:20px; background-color:#0F0">
    	блок 2
    </div>

    Результат:

    блок 1
    блок 2
  2. 1
    2
    3
    4
    5
    6
    
    <div style="position:absolute; top: 50px; background-color:#F00">
    	блок 1
                    <div style="position:absolute; top:20px; background-color:#0F0">
    		блок 2
    	</div>
    </div>

    Результат:

    блок 1

    блок 2

Перекрытие слоев в CSS

z-index

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

Значения:

  • auto «нулевой уровень», задаваемый по умолчанию;
  • отрицательное число — объект располагается «ниже» нулевого уровня (удаляется вглубь, под элементы);
  • положительное число — объект располагается «выше» нулевого уровня.

Пример:

...
<style type="text/css">
img{
	position:absolute;
	left:0px;
	z-index:-1;
}
</style></head> 
<body> 
<div style="position:relative">
<img src="..."/>
<p>Параграф нормального потока</p>
</div>

Результат:

Перекрытие слоев в CSS

Задание: Скачайте файл.
Добейтесь эффекта, как на итоговом изображении, используя файл logo.png в качестве тега img.

Используйте следующие свойства CSS:

  • position:
  • z-index:
  • top:
  • left:
  • opacity:0.5; /* прозрачность */
  • filter: Alpha(Opacity=50); /* прозрачность для IE */

Требуемый результат:
задание на абсолютное позиционирование

Поделитесь уроком с коллегами и друзьями:

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

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

*
*


Вставить формулу как
Блок
Строка
Дополнительные настройки
Цвет формулы
Цвет текста
#333333
Используйте LaTeX для набора формулы
Предпросмотр
\({}\)
Формула не набрана
Вставить