Пример 1
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Позиционирование</title> <style> #layer1, #layer2 { width: 100px; height: 100px; } #layer1 { background-color: red; } #layer2 { background-color: green; position: absolute; left: 50px; top: 50px; } </style> </head> <body> <div id="layer1"></div> <div id="layer2"></div> </body> </html> |
Свойство “background-color” задаёт первому HTML элементу “div” красный цвет, а второму – зелёный.
Значение “absolute” свойства “position” указывает, что координаты второго элемента задаются относительно веб-страницы. Также можно указать значение “fixed”, что будет определять координаты относительно экрана. При прокрутке веб-страницы позиция элемента не изменится. А также можно указать значение “relative”, что задаст координаты относительно текущей позиции элемента.
Горизонтальную координату второго элемента – левый край задаёт свойство “left”, а вертикальную координату – верхний край задаёт свойство “top”. Также можно определить правый край – через свойство “right” и нижний край – через свойство “bottom”.
Пример 2
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Позиционирование</title> <style> #layer1 { width: 100px; height: 100px; background-color: red; position: relative; left: 50px; top: 50px; } #layer2 { width: 50px; height: 50px; background-color: green; position: absolute; bottom: 20px; right: 20px; } </style> </head> <body> <div id="layer1"> <div id="layer2"> </div> </div> </body> </html> |
Если у первого HTML элемента свойство “position” имеет значения “absolute”, “fixed” или “relative”, то у второго вложенного элемента со свойством “position”, имеющем значение “absolute”, координаты будут отсчитываться относительно первого элемента, а не веб-страницы. В данном примере у первого элемента с атрибутом “id” равным “layer1” свойство “position” имеет значение “relative”. Поэтому у вложенного в него элемента с атрибутом “id” равным “layer2” и со свойством “position” равным “absolute” координаты отсчитываются относительно первого элемента.
Пример 3
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Позиционирование</title> <style> #layer1, #layer2, #layer3 { width: 100px; height: 100px; } #layer1 { background-color: red; z-index: 0; } #layer2 { background-color: green; position: absolute; left: 25px; top: 25px; z-index: -10; } #layer3 { background-color: blue; position: absolute; left: 50px; top: 50px; z-index: 10; opacity: 0.5; } </style> </head> <body> <div id="layer1"></div> <div id="layer2"></div> <div id="layer3"></div> </body> </html> |
Свойство “z-index” определяет позицию перспективы. Значение представляет целое число. Чем больше значение, тем ближе элемент, чем меньше, – тем дальше.
Свойство “opacity” задаёт полупрозрачность синего квадрата. Значение “opacity” указывается от “0” – полная прозрачность до “1” – полная непрозрачность.
