Как абсолютно спозиционировать элемент?

Question

[boga-net]

Что-то не могу абсолютно спозиционировать панельку с кнопками. У родителя задана position: relative, но, подозреваю, это из-за того, что у этого родителя не задана высота и она определяется автоматически в зависимости от контента. От чего, просто неоткуда определить этот bottom.

Наверху три красные кнопки, а им надобно быть поверх слайдера снизу (примерно 100px отсносительно слайдера). Что я делаю не так ? Нужен свежий взгляд (свежая голова)
Я знаю, что по правилам нужно скидывать код сюда, но css с синтаксисом .sass, и там вложенность и его много, что, скорее всего, лишь запутает людей. Посему прилагается ссылка на песочницу

Наверное, так будет легче : https://codepen.io/anon/pen/BVrGWq?editors=0110

Элемент определён в стилях как .main-slider-btn-wrapper и вложен в .header-wrapper

Неужто единственный выход - задавать min-height: (какой-то) для .main-slider-wrapper и потом в media регулировать эту высоту ? Можно и ловить это положение top-ом, но это не круто.

Спасибо за помощь.

Answer 1

[tyzberd]

У родителя задана position: relative, но, подозреваю, это из-за того, что у этого родителя не задана высота и она определяется автоматически в зависимости от контента.

это из за position: absolute; для main-slide

Comments

[boga-net]

tyzberd у меня несколько main-slide и они находятся на одном уровне вложенности, что и контейнер с кнопками, и имеют общего родителя с position: relative. Так что по идее, это не должно никак влиять. Или я чего-то не понимаю ?

[boga-net]

tyzberd к тому же слайды по любому придётся абсолютить. Есть какие-нибудь варианты решения ? Я надеялся, что может я затупил и что-то упустил

[Егор Соколов]

boga-net, через CSS вряд ли удастся разрулить, т. к. absolute исключает элементы из потока. Если посмотреть как работают всякие слайдеры, они определяют высоту текущего слайда и присваивают её родителю.

[tyzberd]

и имеют общего родителя с position: relative.

в этом блоке ничего кроме блоков с absolute, поэтому у него высота нулевая.
absolute не тянет блок обертку.

к тому же слайды по любому придётся абсолютить.

посмотрите как сделаны популярные слайдеры, у них слайды без absolute

Answer 2

[Виктор]

Если можешь изменить структуры и не хочешь делать слайды не absolute, то можешь переместить кнопки в первый слайд https://codepen.io/anon/pen/GGxPyK, но нужно понимать возможные проблемы из-за этого.
Второй вариант на js высчитывать высоту родителя по высоте слайдов.

Comments

[boga-net]

Структуру могу менять как угодно. Всё дело в результате. Пробовал перемещать кнопки в слайды, но они не должны зависеть от слайдов, потому что кнопки по id связаны с id слайдов - нажал вторую кнопку, переключился на второй слайд. Так что они должны быть поверх слайдов.

Думал про js и высоту, но это словно какой-то самый крайний метод

Короче, задал фиксированную высоту родителю и всё стало хорошо