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

Ну вот, все основы CSS уже позади, время переходить к более сложным но не менее интересным вещам, в этом уроке мы будем изучать: абсолютное позиционирование.
Что такое абсолютное позиционирование?, скажут некоторые новички, абсолютное позиционирование это возможность, благодаря которой мы можем размещать на своём сайте, абсолютно что угодно и где угодно, это поистине очень мощная штука в CSS.

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

Для начала, я хочу дать несколько рекомендаций по этому поводу, сам элемент, который вы хотите спозиционировать, лучше помещать в тэг: span /span и присваивать ему не класс, а параметр id, это я написал чисто как совет, вы можете конечно применять это по своему усмотрению.

Теперь давайте смотреть, что надо писать в файле style.css, чтобы всё сработало правильно:

#free {
position:absolute;
top:145px;
right:400px;
height:263px;
width:350px;
background-image:url(uploads/ya.jpg);
}

#free - Это название идентификатора, об этом говорит значёк решетки.

position:absolute; - Означает что будет применяться абсолютное позиционирование.

top:145px; - Это говорит о том, что изображение следует переместить на 145 пикселей от верхнего края.

right:400px; - А здесь соответственно, переместить изображение на 400 пикселей от правого края браузера.

height:263px; - В этом значении мы указываем высоту нашего позиционированного изображения.

width:350px: - Это ширина изображения.

background-image:url(uploads/ya.jpg); - В этой строке указан полный адрес местонахождения самого графического элемента, в данном случае оно находится в папке "uploads", называется "ya" и имеет расширение " .jpg".

Теперь когда мы разобрались со стилевым кодом, нам надо придать сам этот идентификатор "#free", тому изображению, которое находится на html странице, это делается так:

span id="free" img src="uploads/ya.jpg" /span

Ну теперь можно и посмотреть на то что у нас получилось в браузере, в моём случае, это опера мини. Кстати, это та-же страница, на которой мы тиражировали изображение в прошлом уроке.

Кроме функции "position:absolute;", в CSS можно использовать и "position:relative;", отличается он от абсолютки тем, что у него отступы назначаются не от краёв экрана, а от того места, где он находился изначально на странице, то есть до придания ему всяких там отступов, ну а в остальном, всё так же, как и у абсолютного позиционирования.

Вот и всё господа сайтостроители, вы изучили еще одну очень мощную возможность в CSS, как всегда всё было очень просто. До встречи в следующих уроках.