Вопрос по calc для margin в CSS, как правильно сделать?

Question

[Дмитрий]

Просьба подсказать по calc. Есть отступ сверху (top) и margin. Если оба значения положительные, то всё работает calc(0px + 20px), если первое число будет отрицательным, то данный метод не работает как надо. Первое число (top), как бы это сказать, не постоянное (задаётся пользователем).
Как правильно сделать, чтобы в результате margin всегда был +20px? То есть, если top: -10px, то margin: 10px.

Answer 1

[Andrey Vasilev]

использовать js
calc позволяет расчитать свойства только во время их определения

Comments

[Дмитрий]

Андрей, можете подсказать на примере, если не трудно, конечно? А то в JS я вообще дилетант, мягко говоря.

Вообще, насколько я понял, надо, чтобы минуса в самой формуле не было, тогда вроде нормально будет работать. То есть убрать из формулы минус.

[Andrey Vasilev]

Дмитрий, а что конкретно нужно реализовать? какой-то плавающий за экраном блок или что?

[Andrey Vasilev]

Дмитрий, вот держи, накидал быстренько на ванильном джс, можешь попробовать под себя немного изменить. если я правильно понял то, что ты хочешь

[Дмитрий]

Andrey Vasilev, настраиваемая градиентная тень, размер которой зависит от отступа (top, bottom и далее) и настройки margin, чтобы тень не обрезалась.
И чтобы всё нормально показывалось, надо: если top: 0, то margin: 20px. Если top: -10px, то margin: 30px. И если top: 10px, то margin: 30px.
Как-то так.

[Andrey Vasilev]

Дмитрий, да у тебя тут целое задание)
тебе без js это вряд ли реализоваться удастся. в принципе в моем примере логика уже заложена, то есть я сдвигаю на 10px блок и при этом нужно отрисовывать 10px тени, как я понял.

[Дмитрий]

Andrey Vasilev, большое спасибо за пример, но, наверное, с calc не получится, так как при положительном значении top, надо, чтобы margin был меньше (например, top: 20px, то margin: 0px).
Но за ответ всё равно спасибо!

[Andrey Vasilev]

Дмитрий, пожалуйста)
почитай JavaScript: Dom, Events - тебе должно хватит для реализации