Положение элемента

Свойство position устанавливает систему позиционирования элементов с заданными параметрами в основном окне браузера или в отдельных блоках. Свойство position работает совместно со свойствами left, top, right и bottom которые благодаря своим параметрам непосредственно задают позицию элемента.

left
right

top
bottom


position: absolute
position: fixed
position: relative
position: static
position: inherit

absolute – это значение указывает на то что положение элемента будит рассчитываться в абсолютном порядке.

fixed – задаёт фиксированное положение элемента, при этом, когда прокручивается страница в браузере элемент остается неподвижным.

relative – при использовании данного параметра задаётся относительное позиционирование.

static – значение позиционирование равно значению по умолчанию, аналогично тому, когда свойство position не указано.

inherit – параметр указывает на то что элемент наследует значение.

Для блока с классом container задано свойство position со значением relative. Также для него записаны свойства, такие как высота 440 пикселей и ширину 280 пикселей, цвет фона жёлтого оттенка. Здесь же задана высота текста равная 20 пикселям, отступы справа и слева имеют значение auto, а сверху и снизу ноль.

Внутри блока container расположен элемент box со значением позиционирования absolute, отступ справа right составляет 20 пикселей и столько же снизу bottom. Габариты блока имеют размер по ширине width равной 100 пикселям, а высота задана межстрочным интервалом line-height с тем же значением. Для этого блока также заданы свойства border, background-color, и text-align.


HTML

<div class="container">
  <p>
    relative
  </p>
  <div class="box">
    <p>
      absolute
    </p>
  </div>
</div>


CSS

* {	
    margin: 0;
    padding: 0;
}
body {
    color: #333;
    padding-top: 50px;
    background-color: #eaeaea;
    font-family: Arial, Helvetica, sans-serif;
}
.container{
    width: 440px;
    height: 280px;
    font-size: 20px;
    margin: 0px auto;
    position: relative;
    background-color: #fc0;		
}
.box{
    right: 20px;
    bottom: 20px;
    width: 100px;
    position: absolute;
    text-align: center;
    line-height: 100px;
    background-color: #C60;
    border: thin solid #333;
}
.container p {
    padding-top: 20px;
    padding-left: 20px;
}
.container .box p{
    padding: 0;
    color: #fff;
}

В блоке с классом container размещены два элемента с селектором box, свойства которого аналогичны предыдущему примеру. Селектор первого элемента one задаёт отступ сверху 90 пикселей, а слева 110 пикселей. Селектор второго элемента two имеет значение отступа сверху аналогичный первому, а отступ слева 230 пикселей. Оба селектора записываются через пробел с селектором box.

CSS позиционирование относительно родителя


HTML

<div class="container">

  <div class="box one">
    <p>
      1
    </p>
  </div>
  
  <div class="box two">
    <p>
      2
    </p>
  </div>
  
</div>


CSS

.container{
    width: 440px;
    height: 280px;
    font-size: 20px;
    margin: 0px auto;
    position: relative;
    background-color: #fc0;		
}
.box{
    width: 100px;
    height: 100px;
    color: #white;
    position: absolute;
    text-align: center;
    background-color: #C60;
    border: thin solid #333;
}
.one{
    top: 90px;
    left: 110px;
}
.two{
    top: 90px;
    left: 230px;
}

В данном примере использованы те же свойства container и box. Значение отступа сверху селектора one первого элемента составляет 66px, слева 146px; второго two – 90px сверху, 170px слева; третьего three – 114px сверху, 194px слева.

CSS абсолютное позиционирование внутри div


HTML

<div class="container">

  <div class="box one">
    <p>
      1
    </p>
  </div>
  
  <div class="box two">
    <p>
      2
    </p>
  </div>
  
  <div class="box three">
    <p>
      3
    </p>
  </div>
  
</div>


CSS

.container{
    width: 440px;
    height: 280px;
    font-size: 20px;
    margin: 0px auto;
    position: relative;
    background-color: #fc0;		
}
.box{
    width: 100px;
    height: 100px;
    color: white;
    position: absolute;
    text-align: center;
    background-color: #C60;
    border: thin solid #333;
}
.one{
    top: 66px;
    left: 146px;
}
.two{
    top: 90px;
    left: 170px;
}
.three{
    top: 114px;
    left: 194px;
}