Відносне позиціонування
Русский перевод: Относительное позиционирование
Коли елементи позиційовані відносно, вони позиціонуються відносно того місця, де вони зазвичай з’являються в потоці. На відміну від абсолютно позиційованих елементів, відносно позиційовані елементи впливають на позиціонування наступних споріднених елементів (нащадків). Елементи позиціонуються відносно зазначенням властивості relative і вказівкою одного або декількох властивостей “зміщення”:
Приклад коду
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
h1 {
position:relative;
top:60px;
left:50px;
border:2px solid #006;
padding:1px;
background-color:#600;
color:#eee;
}
#explanation {
color:#006;
font-weight:bold;
font-size:1.2em;
}
#wrapper {
width:600px;
background-color:#def;
border:1px solid #006;
}
</style>
</head>
<body>
<div id="wrapper">
<h1>CSS Relative Positioning</h1>
<h2>From the Left and the Top</h2>
<div id="explanation">
<p>The h1 element on this page has been positioned relative to where it otherwise would be.</p>
<p>All other content on the page will show up in the same position it would have if the h1 had not been positioned at all.</p>
</div>
</div>
</body>
</html>
Зверніть увагу як текст абзацу був би спозиційований, якби елемент h1 не був би переміщений зі свого початкового положення. Це сталося тому, що елемент h1 позиційований відносно.
Приклад з правого нижнього кута
h1 {
position:relative;
bottom:40px;
right:40px;
border:2px solid #006;
padding:1px;
background-color:#600;
color:#eee;
}
Фіксоване позиціонування
Елементи з зафіксованим позиціонуванням (fixed) залишаються в тому ж місці браузерного вікна, навіть коли сторінка прокручується. Це може використовуватися для постійного утримання елемента (наприклад, меню) на сторінці.
Приклад коду
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#homeLink {
position:fixed;
top:20px;
left:0px;
}
</style>
</head>
<body>
<div id="wrapper">
<a href="index.html" id="homeLink"><img src="Images/littleHome.png" alt="Home"></a>
<h1>CSS Fixed</h1>
<h2>In Upper-Left Corner</h2>
<div id="explanation">
<p>The h1 element on this page has fixed positioning.</p>
<p>It will not move from its place in the upper-left corner when the window is scrolled.</p>
</div>
</div>
</body>
</html>