CSS. Позиционирование элементов.

     Для размещения элемента в нужном месте на странице применяется CSS-позиционирование. Позиционирование задается свойством position, которое может принимать значение: relative - относительное позиционирование; absolute - абсолютное позиционирование.

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

     position:relative - определяет относительное CSS позиционирование и может иметь значение :
left - перемещение слева направо;
top - перемещение сверху вниз;
bottom -  перемещение снизу вверх.
right - перемещение справа налево.
     Из примера (см.ниже) видно, что объекты (в нашем случае рисунки) перемещаются относительно своего первоначального положения внутри страницы. Такое позиционирование называется - относительным. (Результаты примеров лучше открыть полностью в браузере и поменять размеры окна, так будет более понятно!)

Пример:

<html>
  <head>
    <title>Относительное CSS позиционирование</title>
    <style type="text/css">
.box1 {
position:relative;
left: 250px;
top: 10px;
}
.box2 {
position:relative;
left: 150px;
top: 10px;
}
    </style>
  </head>
<body>
   <h4> Относительное CSS позиционирование</h4>
<p>Увлекательнейшая онлайн-игра, действие которой разворачивается в фэнтези мире Фэо. На протяжении многих лет здесь идет война между людьми и магмарами. Два великих дракона стоят на страже интересов обеих рас. Нет силы, способной противостоять мощи гигантов, но когда приходит хаос, даже они не в силах сдерживать зыбкий баланс сил.</p>  
<div class="box1">
<img src="dwar_240x400_trusishka.jpg" style="width:85px;height:72px;">
</div>
<p>Увлекательнейшая онлайн-игра, действие которой разворачивается в фэнтези мире Фэо. На протяжении многих лет здесь идет война между людьми и магмарами. Два великих дракона стоят на страже интересов обеих рас. Нет силы, способной противостоять мощи гигантов, но когда приходит хаос, даже они не в силах сдерживать зыбкий баланс сил.</p>  
<div class="box2">
<img src="dwar_240x400_trusishka.jpg" style="width:85px;height:72px;">
</div>
   </body>
</html>

 

Результат: (открыть в браузере)

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

     position:absolute - определяет абсолютное CSS позиционирование. Также можно использовать значения left, right, top и bottom. Но, в отличие от относительного позиционирования, эти значения откладываются от границ окна браузера. Из нашего примера (см. ниже) видно, что элементы (в нашем случае рисунки) как бы не существуют в нашем документе и не получают никакого пространства в нем, а отображаются как бы сами по себе - абсолютно. Такое позиционирование называется - абсолютным.

Пример:

<html>
  <head>
    <title> Абсолютное CSS позиционирование</title>
    <style type="text/css">
.box1 {
position:absolute;
left: 50px;
top: 30px;
}
.box2 {
position:absolute;
left: 400px;
top: 100px;
}
</style>
  </head>
<body>
   <h4> Абсолютное CSS позиционирование</h4>
<p>Увлекательнейшая онлайн-игра, действие которой разворачивается в фэнтези мире Фэо. На протяжении многих лет здесь идет война между людьми и магмарами. Два великих дракона стоят на страже интересов обеих рас. Нет силы, способной противостоять мощи гигантов, но когда приходит хаос, даже они не в силах сдерживать зыбкий баланс сил.</p>  
<div class="box1">
<img src="dwar_240x400_trusishka.jpg" style="width:85px;height:72px;">
</div>
<p>Увлекательнейшая онлайн-игра, действие которой разворачивается в фэнтези мире Фэо. На протяжении многих лет здесь идет война между людьми и магмарами. Два великих дракона стоят на страже интересов обеих рас. Нет силы, способной противостоять мощи гигантов, но когда приходит хаос, даже они не в силах сдерживать зыбкий баланс сил.</p>  
<div class="box2">
<img src="dwar_240x400_trusishka.jpg" style="width:85px;height:72px;">
</div>
   </body>
</html>

 

Результат: (открыть в браузере)

 
Загрузка...