В примере показано, как позиционировать
- В примере показано, как позиционировать элемент относительно его обычного положения. <html> <head> <style type="text/css"> p.left { position:relative; left:-20px } p.right { position:relative; left:20px } </style> </head>
<body> <p>Параграф</p> <p class="left">Параграф смещен влево относительно обычного положения </p> <p class="right">Параграф смещен вправо относительно обычного положения</p> </body>
</html> - В примере показано, как позиционировать элемент с помощью абсолютного значения. <html> <head> <style type="text/css"> p.ab { position:absolute; left:75px; top:200px } </style> </head>
<body> <p class="ab">Параграф имеет абсолютное местоположение и смещен на 100px от левого края страницы и на 150px от верха страницы</p> <p>Параграф</p> </body>
</html> - В примере показано, как задать форму элемента, по которой он обрезается и выводится. <html> <head> <style type="text/css"> p { position:absolute; clip:rect(2px 250px 250px 0px) } </style> </head>
<body> <p>Обрезается параграф параграф параграф:</p> <p></p> </body>
</html> - В примере показано, как использовать параметр 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> - В примере показано, как выравнять в тексте изображение по вертикали. <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> - В примере показано, как можно использовать 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> - В примере показано, что произойдет если элементы из предыдущего примера изменят свои значения 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>
Содержание раздела
