Опубликован: 31.10.2006 | Уровень: для всех | Доступ: платный
Лекция 12:

Позиционирование в CSS

< Лекция 11 || Лекция 12: 1234 || Лекция 13 >
Аннотация: Подробно рассматриваются методы определения положения элемента.

Данные параметры позволяют определить положение элемента.

Примеры:

  1. В примере показано, как позиционировать элемент относительно его обычного положения.
    <html>
    <head>
    <style type="text/css">
    p.left
    {
    position:relative;
    left:-20px
    }
    p.right
    {
    position:relative;
    right:20px
    }
    </style>
    </head>
    
    <body>
    <p>Параграф</p>
    <p class="left">Параграф смещен влево относительно обычного положения </p>
    <p class="right">Параграф смещен вправо относительно обычного положения</p>
    </body>
    
    </html>
  2. В примере показано, как позиционировать элемент с помощью абсолютного значения.
    <html>
    <head>
    <style type="text/css">
    p.ab
    {
    position:absolute;
    left:75px;
    top:200px
    }
    </style>
    </head>
    
    <body>
    <p class="ab">Параграф имеет абсолютное местоположение и 
    смещен на 75px от левого края страницы и на 200px от верха страницы</p>
    <p>Параграф</p>
    </body>
    
    </html>
  3. В примере показано, как задать форму элемента, по которой он обрезается и выводится.
    <html>
    <head>
    <style type="text/css">
    p
    {
    position:absolute;
    clip:rect(2px 250px 250px 0px)
    }
    </style>
    </head>
    
    <body>
    <p>Обрезается параграф параграф параграф:</p>
    <p></p>
    </body>
    
    </html>
  4. В примере показано, как использовать параметр overflow для определения действий, когда содержимое элемента не помещается в указанной области.
    <html>
    <head>
    <style type="text/css">
    div 
    {
    background-color:yellow;
    width:175px;
    height:70px;
    overflow: auto
    }
    </style>
    </head>
    
    <body>
    <p>Если содержимое элемента превышает заданные значения ширины и 
    высоты необходимо использовать параметр overflow  который определяет, 
    что делать в этой ситуации.</p>
    <div>
    В данном случае переполняется бокс элемента и overflow определяет, 
    что делать - установлено значение auto.  
    </div>
    
    </body>
    
    </html>
  5. В примере показано, как выровнять в тексте изображение по вертикали.
    <html>
    <head>
    <style type="text/css">
    img.first {vertical-align:text-bottom}
    img.second {vertical-align:text-top}
    </style>
    </head>
    
    <body>
    <p>
    Пара- 
    <img class="second" border="0" 
    src="image.gif" width="100" height="100" />
    граф.
    </p> 
    
    <p>
    Пара- 
    <img class="first" border="0" border-color="blue" 
    src="image.gif" width="100" height="100" />
    граф.
    </p>
    </body>
    
    </html>
  6. В примере показано, как можно использовать Z-index для размещения элемента "позади" другого элемента.
    <html>
    <head>
    <style type="text/css">
    img.index
    {
    position:absolute;
    left:10px;
    top:40px;
    z-index:-1;
    }
    </style>
    </head>
    
    <body>
    <h4>Пример использования Z-index</h4>
    <img class="index" src="image.gif" width="120" height="150" border="1"> 
    <p>Изображение с z-index равным -1 имеет меньший приоритет, 
    поэтому расположено "позади".</p>
    </body>
    
    </html>
  7. В примере показано, что произойдет если элементы из предыдущего примера изменят свои значения Z-index.
    <html>
    <head>
    <style type="text/css">
    img.index
    {
    position:absolute;
    left:10px;
    top:40px;
    z-index:1
    }
    </style>
    </head>
    
    <body>
    <h4>Пример использования Z-index</h4>
    <img class="index" src="image.gif" width="120" height="150" border="3"> 
    <p>Изображение с z-index равным 1 имеет более высокий приоритет, 
    поэтому расположено "спереди".</p>
    </body>
    
    </html>
< Лекция 11 || Лекция 12: 1234 || Лекция 13 >
Илья Ардов
Илья Ардов

Добрый день!

Я записан на программу. Куда высылать договор и диплом?

Елена Сапегова
Елена Сапегова

После прохождения теоретической части пришло письмо об окончании теоретической части курса, будет ли практическая часть?

Елена Елаева
Елена Елаева
Россия
Владимир Лагодный
Владимир Лагодный
Россия