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

Продолжаем изучение уроков по CSS. В этом уроке пройдем такую интересную тему как абсолютное позиционирование.

Абсолютное позиционирование - это возможность размещения любого изображения в любом конкретном месте нашей web-страницы.

Для примера выберите себе какое-нибудь изображение размером 100×85px и попробуем его разместить на странице.

Мы уже не можем разместить это изображение на странице используя свойство background-position так как на фон страницы можно использовать только одно изображение.

Так что для размещения нашего изображения на странице в определенном месте нам необходимо применить абсолютное позиционирование. К тому же узнаем что такое id-клас, так как мы его еще не проходили.

id-класс применяется для передачи каких то параметров конкретно одному элементу страницы и эти параметры не могут использоваться другими объектами страницы.

Создаем id-клас - пишем вначале знак решетки #, а затем название - пусть будет free. Далее, как обычно, в фигурных скобках прописываем свойства.

Пример:

#free {

position:absolute;

top:220px;

right:120px;

width:100px;

height:85px;

background-imege:url(путь к файлу с изображением);

}

 

Самое главное свойство - position со значением absolute

position:absolute; - позиционируем данный элемент абсолютно (конкретно в какое то место)

Далее указываем место расположения данного объекта:

top:220px; - расстояние от верхнего края страницы до объекта

right:120px; - расстояние от правого края страницы до объекта

Указываем размеры самого позиционируемого блока:

width:100px; - ширина позиционируемого блока

height:85px; - высота позиционируемого блока

Осталось прописать фоновое изображение конкретно нашему позиционируемому блоку:

background-imege:url(путь к файлу с изображением); - адрес нашего изображения

Теперь все это необходимо прописать в html-коде страницы. Для этого создадим какой нибудь пустой тег, например <span>.

Сам по себе этот тег ничего не несет, а вот класс id, прописанный в css-таблице, будет выполняться.

Пример:

<span id="free"></span> 

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