Позиционирование сверху
Свойство 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 как показано на втором нижнем изображении.
Для элемента box свойство position
задано значение absolute
Элемент 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;
}