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

 

С помощью CSS можно точно задать положение элемента на странице. Ре­жимом позиционирования управляет свойство position:

<html>

<head>

<title>Position: absolute</title>

<style>

DIV {

width: 100px;

height: 100px;

border: 3px double black;

padding: 5px;

position: absolute;

}

DIV#first {

background-color: #c0dcc0; top: 40px; left: 40px; }

DIV#second {

background-color: #c0c0dc; top: 80px; left: 100px; }

</style>

</head>

<body>

<div id="first">1</div>

<div id="second">2</div>

</body>

</html>

Для блоков задается отступ от верхнего и левого края свойствами top и left. Так как второй блок объявлен в HTML-коде позже, он перекрывает первый блок на странице.

Рисунок 5. Использование абсолютного позиционирования.

 

Для управления порядком наложения элементов друг на друга необходимо использовать свойство z-index.