Почему задают такие свойства для елемента с position absolute?

Question

[vvanyazz]

зачем некоторые верстальщики для елементов с position absolute задают такие свойства:

width: calc(100% - 20px)
или
top:calc(50% - 80px)

Comments

[Ankhena]

В каком смысле зачем?
Затем, что ширина элемента или его позиция должна рассчитываться именно так.

Для позиционирование вы можете использовать альтернативные варианты через margin или transform, в ситуациях, когда они подходят.
А такой вариант расчета ширины не имеет отношения к position absolute.
Также через calc могут быть выражены и другие свойства, отступы, точки перехода градиента и т.д.

Уточните, что именно вас смущает?

[Nikolay Matyushkin]

width: calc(100% - 20px)

Эта запись говорит: "Пусть элемент, к которому будет применено это свойство, будет на всю ширину устройства (монитор, ноутбук, смартфон) минус 20 пикселей"

top:calc(50% - 80px)

Эта запись говорит: "Пусть элемент, к которому будет применено это свойство, будет позиционироваться в центре экрана (50% это половина экрана) минус 80 пикселей вверх"

[DooX]

Devilz_1, согласен
только не от ширины экрана а от ширины родителя если родителю задан релатив и т д

[Ankhena]

vvanyazz,

Проблема в том, что я не понимаю откуда у них берется эта формула, что от чего отнимают чтобы адаптивно размещать елементы на сайте с absolute

Предположим, есть такое деревце


Блочики должны быть на одинаковом, всегда постоянном расстоянии от середины родителя, пусть 50px. Ширина родителя 80% от body. Ширина блоков - сколько останется места.
Мы не можем задать ширину блоках ни в px, ни в %.
Но можем вычислить: от половины ширины родителя нужно вычесть 50px.
Вот и получаем width: calc(50% - 50px)

Если что, это не единственный вариант решения такой задачи.

Answer 1

[Elena Fire]

Чтобы не сидеть часами у монитора и не писать бесконечные медиа-запросы. Таким незамысловатым образом верстальщики сокращают количество кода, делают его удобочитаемым, а поведение элементов на странице - предсказуемым. И это желательно делать не некоторым верстальщикам, а всем поголовно.

Comments

[vvanyazz]

Проблема в том, что я не понимаю откуда у них берется эта формула, что от чего отнимают чтобы адаптивно размещать елементы на сайте с absolute

[Elena Fire]

vvanyazz, вам в комментариях (которые под вопросом) ответили, как читаются эти формулы.
Верхняя формула: ширина элемента будет на 20px меньше 100%.
Нижняя формула: верх элемента будет находиться на 80px выше середины родительского блока.
Родительским блоком в случае с позиционированием будет ближайший блок со свойством position: relative или position: absolute.
Чтобы понять, как посчитать расстояния и размеры для конкретной верстки, нужно смотреть расположение элементов по замыслу дизайнера.
Все размеры при позиционировании рассчитываются от размеров родительского блока.
Советую в любой песочнице (jsfiddle или codepen) потренироваться на блоках. Типа такого макета:

<div class="main-block">
    <div class="inner-block-1"></div>
    <div class="inner-block-2"></div>
</div>

.main-block {
     width: 200px;
     height: 200px;
     border: 1px solid #000;
     position: relative;
}
.inner-block-1 {
    width: 100px;
    height: 100px;
    background-color: #f00;
    position: absolute;
    top: 0;
    left: 0;
}
.inner-block-2 {
   width: 50px;
   height: 50px;
   background-color: #0f0;
   position: absolute;
   bottom: 0;
   right: 0;
}

И в css вместо абсолютных значений - в px - ставить значения сначала в %, а потом использовать формулу calc(x+-y). Тогда вы очень быстро поймете, как строится связь между элементами с позиционированием и как рассчитывать нужные параметры через калькуляцию (calc).
Поверьте, нет ничего лучше практики.