CSS: Урок 21. CSS позиционирование элементов

Среда, 29 Декабря 2010 г. 20:45 + в цитатник

CSS атрибуты и значения, определяющие позиционирование

CSS делает возможным процесс позиционирования. position – CSS атрибут, определяющий позиционирование элементов страницы. Его значения: relative и absolute определяют соответственно относительное позиционирование и абсолютное позиционирование.

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

Для начала создадим следующие элементы:

                <head>

            <style type="text/css">

            .square1 {border:1px solid #000000; background-color:GreenYellow; color:#000000; width:80px; height:80px}

            .square2 {border:1px solid #000000; background-color:Yellow; color:#000000; width:80px; height:80px}

            </style>

             </head>

            <body>

            <div class="square1">1</div>

            <div class="square2">2</div>

            <img src="../images/image_p.png" alt="" />

            </body>

Результат: перед позиционированием

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

                <head>

            <style type="text/css">

            .square1 {border:1px solid #000000; background-color:GreenYellow;  color:#000000; width:80px; height:80px; position:relative; left:100px}

            .square2 {border:1px solid #000000; background-color:Yellow;  color:#000000; width:80px; height:80px; position:relative; left:250px}

            img {position:relative; left:550px; top:100px}

            </style>

             </head>

            <body>

            <div class="square1">1</div>

            <div class="square2">2</div>

            <img src="../images/image_p.png" alt="" />

            </body>

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

Атрибуты и значения

position:relative – определяет относительное CSS позиционирование.
left – определяет перемещение объекта позиционирования слева направо.
top – определяет перемещение объекта позиционирования сверху вниз.
bottom – определяет перемещение объекта позиционирования снизу вверх.
right – определяет перемещение объекта позиционирования справа налево.

Относительное CSS позиционирование – процесс перемещения объектов относительно своего первоначального положения внутри web-страницы.

Расположим объекты внутри блока:

                <head>

            <style type="text/css">

            #main_square {

            width:500px;

            height:500px;

            background-color:Gray;

            border:1px solid #000000;

            padding:0;

            margin:0 auto

            }

            .square1 {border:1px solid #000000; background-color:GreenYellow; color:#000000; width:80px; height:80px}

            .square2 {border:1px solid #000000; background-color:Yellow; color:#000000; width:80px; height:80px}

            </style>

             </head>

            <body>

            <div class="square1">1</div>

            <div class="square2">2</div>

            <img src="../images/image_p.png" alt="" />

            </body>

Результат: перед позиционированием

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

                <head>

            <style type="text/css">

            #main_square {

            width:500px;

            height:500px;

            background-color:Gray;

            border:1px solid #000000;

            padding:0;

            margin:0 auto

            }

            .square1 {border:1px solid #000000; background-color:GreenYellow;  color:#000000; width:80px; height:80px; position:relative; left:50px;  top:150px}

            .square2 {border:1px solid #000000; background-color:Yellow;  color:#000000; width:80px; height:80px; position:relative; left:150px}

            img {position:relative; left:50px; bottom:150px}

            </style>

             </head>

            <body>

            <div class="square1">1</div>

            <div class="square2">2</div>

            <img src="../images/image_p.png" alt="" />

            </body>

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

Увеличим количество объектов позиционирования:

   <html>

            <head>

             <style type="text/css">

            #main_square {

            width:500px;

            height:500px;

            background-color:Gray;

            border:1px solid #000000;

            padding:0;

            margin:0 auto

            }

            .square1 {border:1px solid #000000; background-color:GreenYellow; color:#000000; width:80px; height:80px}

            .square2 {border:1px solid #000000; background-color:Yellow; color:#000000; width:80px; height:80px}

            .square3 {border:1px solid #000000; background-color:Red; color:#000000; width:80px; height:80px}

            .square4 {border:1px solid #000000; background-color:DeepSkyBlue; color:#000000; width:80px; height:80px}

            </style>

             </head>

            <body>

            <div id="main_square">

            <div class="square1">1</div>

            <div class="square2">2</div>

            <div class="square3">3</div>

            <div class="square4">4</div>

            <img src="../images/image_p.png" alt="" />

            </div>

            </body>

            </html>

Результат: перед позиционированием

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

   <html>

            <head>

             <style type="text/css">

            #main_square {

            width:500px;

            height:500px;

            background-color:Gray;

            border:1px solid #000000;

            padding:0;

            margin:0 auto

            }

            .square1 {border:1px solid #000000; background-color:GreenYellow; color:#000000; width:80px; height:80px}

            .square2 {border:1px solid #000000; background-color:Yellow;  color:#000000; width:80px; height:80px; position:relative; left:418px;  bottom:82px}

            .square3 {border:1px solid #000000; background-color:Red; color:#000000; width:80px; height:80px; position:relative; top:254px}

            .square4 {border:1px solid #000000; background-color:DeepSkyBlue;  color:#000000; width:80px; height:80px; position:relative; left:418px;  top:172px}

            img {position:relative; left:209px; bottom:120px}

            </style>

             </head>

            <body>

            <div id="main_square">

            <div class="square1">1</div>

            <div class="square2">2</div>

            <div class="square3">3</div>

            <div class="square4">4</div>

            <img src="../images/image_p.png" alt="" />

            </div>

            </body>

            </html>

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

Обратите внимание на то, сколько места занимает CSS код. Куда более рационально использовать внешний .css файл. Подробности в уроке внедрение CSS.

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

Пример:

                       <head>

            <style type="text/css">

            #main_square {

            width:500px;

            height:500px;

            background-color:Gray;

            border:1px solid #000000;

            padding:0;

            margin:0 auto

            }

            .square1 {border:1px solid #000000; background-color:GreenYellow;  color:#000000; width:80px; height:80px; position:absolute; left:50px;  top:150px}

            .square2 {border:1px solid #000000; background-color:Yellow;  color:#000000; width:80px; height:80px; position:absolute; right:150px}

            img {position:absolute; left:50px; bottom:150px}

            </style>

             </head>

            <body>

            <div class="square1">1</div>

            <div class="square2">2</div>

            <img src="../images/image_p.png" alt="" />

            </body>

Результат: абсолютное CSS позиционирование

Атрибуты и значения

position:absolute – определяет абсолютное CSS позиционирование элементов web-страницы, при котором значения атрибутов top, right, bottom, left откладываются от границ окна браузера.
margin:0 auto – определяет центрирование блока.

ab-w.net

Рубрики:

Полезное
Уроки CSS