Основы работы с CSS



         

Примеры: - часть 2


<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>




  • Содержание  Назад  Вперед