Позиционирование сверху

CSS top

Свойство top определяет расстояние от элемента по верхнему краю. Свойство top работает совместно со свойством position, и его параметрами.


top: 20px;
top: 30%;
top: auto;
top: inherit;

Для блока container задано свойство position значение, которого выбрано relative (относительно), а свойство top(верх) со значением 50 пикселей. Для этого блока задано ещё ряд свойств, одним из которых является margin со значениями отступов сверху и снизу равными нулю, а справа и слева auto, что удерживает контейнер посередине. Если relative поменять на absolute (абсолютный) контейнер не будет центрироваться, и будет прилегать к левому краю.

Для элемента с классом box задано абсолютное позиционирование, расстояние сверху со значением 20 пикселей и справа на 60 пикселей. Если значение absolute поменять на relative, то box окажется за пределами container как показано на втором нижнем изображении.

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

Для элемента box свойство position
задано значение absolute

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

Элемент box в относительном
позиционировании relative


HTML


<div class="container">

  <div class="box">
    top
  </div>
  
</div>


CSS

.container{
    top: 50px;
    width: 180px;
    height: 180px;
    font-size: 16px;
    margin: 0px auto;
    position: relative;
    background-color: #fc0;
}
.box{
    top: 20px;
    right: 60px;
    width: 60px;
    color: white;
    line-height: 60px;	
    text-align: center;
    position: absolute;
    background-color: #C60;
}