Позиционирование меню поверх слайдера

[Igor_Dp]

Всем доброго времени суток! Не могу определиться, как сделать следующее => есть слайдер (использую slick), поверх которого нужно разместить менюшку и логотип. Изначально я планировал слайдеру задать "position: absolute", а блоку с менюшкой и логотипом - "z-index: 2" (чтобы он был поверх слайдера). Но когда я задаю слайдеру "position: absolute" - с ним происходит что-то ужасное (он в несколько десятков раз увеличивается и соответственно все ломается). Подскажите, как такое можно сделать?? 

[radioactive]

вот https://jsfiddle.net/098cbwy5/1/

по поводу float, прочитайте внимательно эту короткую статью
https://habrahabr.ru/post/136588/

[npofopr]

Прикладывайте пример. Вероятно надо не слайдеру absolute указывать, а обернуть в дополнительный блок. + добавить этому блоку width: 100%;

[Igor_Dp]

http://veented.info/waxom/home-portfolio-rev-slider/ - вот ссылка на макет, который я хочу сверстать.

Вот, что у меня в index.htm:

<header>
        <div class="container">
            <div class="top-line clearfix">
                <div class="header-logo">
                    <img src="images/logo.png" alt="Waxom Hemepage" />
                    <span>Waxom</span>
                </div>
                <div class="header-icon">
                    <img src="images/by-icon.png" alt="" />
                    <img src="images/search-icon.png" alt="" />
                </div>
                <nav class="header-menu clearfix">
                    <ul>
                        <li><a href="">Home</a></li>
                        <li><a href="">About Us</a></li>
                        <li><a href="">Portfolio</a></li>
                        <li><a href="">Features</a></li>
                        <li><a href="">Blog</a></li>
                        <li><a href="">Pricing</a></li>
                        <li><a href="">Shortcodes</a></li>
                        <li><a href="">Contact</a></li>
                    </ul>
                </nav>
            </div>
        </div>
        <div class="slider">
            <div class="slide">
                <img src="images/slider-1/photo_1.jpg" alt="">
            </div>
            <div class="slide">
                <img src="images/slider-1/photo_2.jpg" alt="">
            </div>
            <div class="slide">
                <img src="images/slider-1/photo_3.jpg" alt="">
            </div>
            <div class="slide">
                <img src="images/slider-1/photo_4.jpg" alt="">
            </div>
        </div>
        <div class="slider-fon"></div>
    </header>

буду очень благодарен за подсказку, как это верно сделать. в принципе, у меня получилось добиться результата, но я на 90% уверен, что это не правильный вариант. уж больно криво оно все вышло. думаю есть какой-то более логичный и верный способ.

[radioactive]

вот набросал
https://jsfiddle.net/098cbwy5/

Edited February 26, 2017 by radioactive

[Igor_Dp]

Благодарю за совет, но я уже так пробовал. Потом у меня возникли сложности с использованием"float" для меню. Я сейчас поменял стратегию. top-line оставил в header, задал ему "width: 100%" и "position: fixed", потом следующим по влоденности дивом отцентрировал, ну и с помощью "float" логотип и менюшку по разным углам разбросал. а слайдер перенес в main (тело сайта). Вроде все корректно отобразилось.

[radioactive]

з.ы обновил https://jsfiddle.net/098cbwy5/ (добавил изображениям горизонтальное и вертикальное выравнивание)

какие то дикости у вас, float не работает и все заново ... попробуйте контейнеру родителю прописать owerflow:hidden

а лучше весь код на jsfiddle.net разместите, html и css как минимум, будет видно что не так

Edited February 26, 2017 by radioactive

[Igor_Dp]

Да, удобный сервис. Сейчас уже не за компьютером. А завтра сброшу через сей сервис свой код.

[Igor_Dp]

https://jsfiddle.net/098cbwy5/ - вот мой код.

Только с картинками не получилось, так пути-то к ним прописаны локально. а в нете у меня их нету...

[radioactive]

1 час назад, Igor_Dp сказал:

https://jsfiddle.net/098cbwy5/ - вот мой код.

Только с картинками не получилось, так пути-то к ним прописаны локально. а в нете у меня их нету...

ссылка указана на мой пример

[Igor_Dp]

https://jsfiddle.net/wsxtmfgp/

[radioactive]

опишите вашу проблему и почему мой пример вас не устроил?

[Igor_Dp]

проблема была в том, что я не мог корректно отобразить меню поверх слайдера, как это было указано на макете. когда применял "position: absolute" для блока top-line - некорректно работал "float". и приходилось выдумывать кучу костылей. соответственно получалось что-то нелепое. 

я не говорю, что ваш пример меня не устраивает. я пробовал сделать как у вас, но у меня не получилось. возможно, я что-то в коде напутал. 

сейчас я уже понял, что мне нужно делать. 

в любом случае - благодарю, что помогли) 

[Igor_Dp]

Благодарю