Jump to content
  • 0

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


Igor_Dp
 Share

Question

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

Link to comment
Share on other sites

13 answers to this question

Recommended Posts

  • 0

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% уверен, что это не правильный вариант. уж больно криво оно все вышло. думаю есть какой-то более логичный и верный способ.

Link to comment
Share on other sites

  • 0

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

Link to comment
Share on other sites

  • 0

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

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

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

Edited by radioactive
Link to comment
Share on other sites

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

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

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

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

Link to comment
Share on other sites

  • 0

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

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

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

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy