Горизонтальная к офсетной навигация с заставкой, конфликты абсолютного позиционирования

Я работаю над тем же сайтом из предыдущего вопроса (и я - CSS3 noob). На сайте, на котором я работаю, есть меню горизонтальной навигации, которое переключается в меню холста. Я запускаю классы с помощью jQuery, и это выглядит довольно хорошо. Html делится на два divs, #drawer и # site-canvas. Упрощенная HTML-выглядит такГоризонтальная к офсетной навигация с заставкой, конфликты абсолютного позиционирования

<body> 
<nav id="drawer"> 
//ul menu stuff 
</nav> 
<div id="site-canvas"> 
    <header> // header for mobile version </header> 
    <div class="splash">//Splash Screen<div> 
    <div id="site-content">//Lorem Ipsum<div> 
</div> <!--End #site-canvas--> 
</body>

Это собирается, чтобы показать заставку с изображением, которое будет принимать до 100% от видового экрана и оставаться в центре.

/* Splash page */ 
.splash { 
    background: url('//image') center center; 
    background-size: cover; 
    min-height: 100%; 
}

До сих пор так хорошо, но в стилях рабочего стола (1000px + ширина) теперь мы имеем конфликт с нав ДИВ находясь вне холста сайта вызывает его зафиксировать с отдельной полосой прокрутки (также Всплеск стрелка экрана теперь также исправлена, а нижняя часть изображения не находится в нижней части окна просмотра). У этой мобильной версии эти проблемы отсутствуют. http://codepen.io/StuffieStephie/pen/pJVKmv Fixed problem

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

.splash { 
    background: url('//someimage.jpg') center center; 
    background-size: cover; 
    min-height: 100%; 
    width: 100%; 
    text-align: center; 
    position:absolute; 
    top: 0; 
    left: 0; 
    z-index: 0; 
}

Absolute positioning problem http://codepen.io/StuffieStephie/pen/oXdMBy

Любые идеи о том, как это исправить? Я так потерялся.

источник

2015-07-11 StephanieQ

Я думаю, что добавление 'position: relative' в ваш' splash' div должно исправить вашу проблему с стрелкой в первом кодексе – zgood

Это [Fiddle] (http://codepen.io/anon/pen/MwGBob) близко к тому, что ты ищешь? – zgood

@zgood Да! Спасибо! Я придумал свое решение, но использовал два навигатора (один и один из холста сайта) и поворачивал/отображал их со средствами массовой информации. Ваше решение выглядит очень хорошо: D Мне просто нужно изменить аргумент функции анимации jQuery на # site-canvas, если заголовок видимый и тело, если это не так. Вы должны поместить свою скрипку в ответ с объяснениями, чтобы я мог дать вам надлежащую награду за репутацию: D – StephanieQ

Я придумал решение here.

Чтобы устранить проблему со стрелкой я добавил position:relative; к splash DIV, чтобы сделать стрелку, которая position:absolute; самого якоря этого DIV, вместо окна браузера.

Чтобы исправить nav вопрос, который я изменил свое позиционирование fixed, а затем удаляются из overflow:hidden;body, html и удалены из overflow-y: scroll;#site-canvas тега.

Это делает фиксированный nav. который, по моему мнению, является намеченной целью, и позволяет остальной поток документа естественным путем удалять свойства стиля переполнения элементов упаковки.

источник

2015-07-11 01:19:48 zgood

Горизонтальная к офсетной навигация с заставкой, конфликты абсолютного позиционирования

ответ

Смежные вопросы