Относительное позиционирование.

Относительное позиционирование (position: relative) определяет место элемента относительно краёв элемента родителя и не выводится из общего потока.

Так же как и в случае с абсолютным позиционированием расстояния от края/краёв родительского элемента задаётся с помощью свойств: bottom, left, right, top.

Пример:

<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Transitional//EN" " https://www.w3.org/TR/html4/loose.dtd" >
< html>
< head>
< title> Относительное позиционирование.< /title>
< style type=" text/css" >
h1 {
color: #008000;
font-size: 20px
}
div.blok1 {
background: #c0e4ff;
border: #000000 2px solid;
padding: 5px;
width: 500px;
height: 400px;
}
div.blok2 {
position: relative;
left: 150px;
background: #ffa0c5;
border: #000 2px solid;
padding: 5px; width: 250px;
height: 200px;
}
< /style>
< /head>
< body>
< div class=" blok1" >
< h1> Элемент родитель - блок №1< /h1>
< div class=" blok2" >
< h1> Блок №2< /h1>
Данный блок позиционирован относительно левого края элемента родителя.
< /div>
< /div>
< /body>
< /html>

В случае если элемент родитель явно не задан, то отчет ведётся от края/краёв окна браузера.

Фиксированное позиционирование.

Фиксированное позиционирование (position: fixed) похоже на абсолютное, элемент выводится из общего потока, его координаты рассчитываются от краёв окна браузера, но при прокрутке страницы элемент не меняет своего положения.

Пример:

Файл style.css
h1 {
color: #800;
text-align: center;
font-size: 30px
}
h2 {
color: #088;
text-align: center;
font-size: 18px
}
div.blok1 {
background-image: url(fon.gif);
border: #000 2px solid;
padding: 5px;
width: 800px;
height: 4000px
}
div.blok2 {
position: fixed;
left: 250px;
top: 300px;
border: #080 6px double;
padding: 5px;
width: 300px
}

Файл index.html
<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Transitional//EN" " https://www.w3.org/TR/html4/loose.dtd" >
< html>
< head>
< title> Фиксированное позиционирование.< /title>
< link rel=" stylesheet" href=" style.css" type=" text/css" >
< /head>
< body>
< div class=" blok1" >
< h1> Какая то страничка< /h1>
< /div>
< div class=" blok2" >
< h2> Фиксированный блок с навязчивой рекламой< /h2>
< h1> Купи слона!! < /h1>
Фиксированный блок, выведен из общего потока элементов, при прокручивании страницы он не меняет своего положения. Ранние версии браузера Internet Explorer игнорируют данное свойство.
< /div>
< /body>
< /html>

P.S. Ранние версии браузера Internet Explorer игнорируют данное свойство и элемент выводится на странице так как будто его вовсе не позиционировали.