Коли елементи позиційовані відносно, вони позиціонуються відносно того місця, де вони зазвичай з’являються в потоці. На відміну від абсолютно позиційованих елементів, відносно позиційовані елементи впливають на позиціонування наступних споріднених елементів (нащадків). Елементи позиціонуються відносно зазначенням властивості relative і вказівкою одного або декількох властивостей “зміщення”:
Приклад коду
01 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
02 |
<html xmlns="http://www.w3.org/1999/xhtml target="_blank">http://www.w3.org/1999/xhtml"> |
03 |
<head> |
04 |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
05 |
<style type="text/css"> |
06 |
h1 |
07 |
position:relative; |
08 |
top:60px; |
09 |
left:50px; |
10 |
border:2px solid #006; |
11 |
padding:1px; |
12 |
background-color:#600; |
13 |
color:#eee; |
14 |
15 |
#explanation |
16 |
color:#006; |
17 |
font-weight:bold; |
18 |
font-size:1.2em; |
19 |
20 |
#wrapper |
21 |
width:600px; |
22 |
background-color:#def; |
23 |
border:1px solid #006; |
24 |
25 |
</style> |
26 |
<title>CSS Relative Positioning</title> |
27 |
</head> |
28 |
<body> |
29 |
<div id="wrapper"> |
30 |
<h1>CSS Relative Positioning</h1> |
31 |
<h2>From the Left and the Top</h2> |
32 |
<div id="explanation"> |
33 |
<p>The h1 element on this page has been positioned relative to where it otherwise would be.</p> |
34 |
<p>All other content on the page (including these sentences) will show up in the same position it would have if the h1 had not been positioned at all.</p> |
35 |
</div> |
36 |
</div> |
37 |
</body> |
38 |
</html> |
Зверніть увагу як текст абзацу був би спозиційований, якби елемент h1 не був би переміщений зі свого початкового положення. Це сталося тому, що елемент h1 позиційований відносно
Подивимося, що станеться, якщо ми спозиціонуємо елемент h1 з правого нижнього кута, використовуючи відносне позиціонування як в цьому коді:
1 |
h1 |
2 |
position:relative; |
3 |
bottom:40px; |
4 |
right:40px; |
5 |
border:2px solid #006; |
6 |
padding:1px; |
7 |
background-color:#600; |
8 |
color:#eee; |
9 |
Фіксоване позиціонування
Елементи з зафіксованим позиціонуванням (fixed) залишаються в тому ж місці браузерного вікна, навіть коли сторінка прокручується. Це може використовуватися для постійного утримання елемента (наприклад, меню) на сторінці.
У зазначеному нижче прикладі фіксоване позиціонування використовується для утримання знака «додому», який посилається на головну сторінку у верхньому лівому кутку.
Приклад коду
01 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
02 |
<html xmlns="http://www.w3.org/1999/xhtml target="_blank">http://www.w3.org/1999/xhtml"> |
03 |
<head> |
04 |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
05 |
<style type="text/css"> |
06 |
#homeLink |
07 |
position:fixed; |
08 |
top:20px; |
09 |
left:0px; |
10 |
11 |
---- Code Omitted ---- |
12 |
13 |
</style> |
14 |
<title>CSS Fixed Positioning</title> |
15 |
</head> |
16 |
<body> |
17 |
<div id="wrapper"> |
18 |
<a href="l" id="homeLink"><img src="Images/littleHome.png" alt="Home"></a> |
19 |
<h1>CSS Fixed</h1> |
20 |
<h2>In Upper-Left Corner</h2> |
21 |
<div id="explanation"> |
22 |
<p>The h1 element on this page has fixed positioning.</p> |
23 |
<p>It will not move from it's place in the upper-left corner when the window is scrolled.</p> |
24 |
</div> |
25 |
</div> |
26 |
</body> |
27 |
</html> |