Как помешать абсолютно позиционированному элементу div укладывать поверх / под фиксированный элемент div?

Question

Как помешать абсолютно позиционированному элементу div укладывать поверх / под фиксированный элемент div?

0

проблема

У меня есть фиксированный заголовок и абсолютно позиционированный div. Они оба позиционируются с использованием верхнего значения и сидят до тех пор, пока высота страницы не будет высотой, для которой требуется полоса прокрутки.

Абсолютно позиционированный div затем перемещается со страницей и складывается под заголовком.

NB: Абсолютно позиционируемая div-рамка div должна оставаться в состоянии прокрутки по горизонтали.

Я сделал JsFiddle, чтобы лучше продемонстрировать, что я пытаюсь объяснить.

JsFiddle проблемы

Мой CSS

@charset "utf-8";
/* CSS Document */


/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}

*, :before, :after {
    -ms-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}
body {
    line-height: 1;

}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/*End of CSS reset*/


a:link {
    color: #FFF;
    text-decoration: none;
}      /* unvisited link */
a:visited {
    color: #FFF;
    text-decoration: none;
}  /* visited link */
a:hover {
    color: #FFF;
    text-decoration: none;
}  /* mouse over link */
a:active {
    color: #030303;
    text-decoration: none;
    font-size: 100%;
}  /* selected link */

html{
    height:100%;

}
body{
    background-color:#424242;
    height:100%;


}

#spacer
{
    height:400px
}



#headerWrapper {
    position: fixed;
    display: inline-block;
    width: 100%;
    height:400px auto;
    z-index: 999;
    top: 0;
}


#headerWrapper #header{
    position: fixed;
    display: inline-block;
    width: 100%;
    height: 200px;
    z-index: 999;
    top: 0;


}
#headerWrapper #header #title{
    position: fixed;
    font-size: 3em;
    color: #FFF;
    margin-top: 30px;
    margin-left: 30px;
    margin-bottom: 10px;
    top: 0px;
}

#headerWrapper #header #tagline{
    position: fixed;
    font-size: 2em;
    color: #d3701e;
    margin-left: 30px;
    top: 90px;
}

#tabsContainer {
    padding: 0;
    margin-left:18px;
    position: fixed;
    top: 120px;
    font-size: 14px;
    line-height: 18px;
    font-family: "swiss", "Arial", sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    cursor: default;
    white-space:nowrap;
}
#tabsContainer ul {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size:24px;
}
#tabsContainer ul li {
    display: inline;
    margin: 0px;
    display: block;
    height: 50px;
    text-align: center;
    line-height: 30px;
    font-size:24px;
}
#tabsContainer ul li a {
    height: 33px;
    display: block;
    float: left;
    padding: 17px 15px 0 15px;
    font: bold 12px Arial;
    color: #FFF;
    text-decoration: none;
    font-size:24px;
}
#tabsContainer ul li a:hover {
    color: #d3701e;
    height: 50px;
    font-size: 24px;
}
#tabsContainer ul li #active a {
    color: #d3701e;
    background: url(images/navigation-hover.png) repeat-x left top;
    font-size:24px;
}

.tab{
float: left;    
font-size:24px;
}

.tab.one
{
    width:220px;
    font-size:24px;

}


/*#photoframeContainer{

    padding-top: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    margin-bottom: 20px;
    padding-bottom: 20px;
    position: absolute;
    bottom:0px;

}*/

#photoframe {
    position: absolute;
    padding: 0 25px 0 25px;
    height: 600px;
    top: 242px;
    overflow: visible;
    white-space: nowrap;
    left: 0px;


}
#photoframe .imageContainer {
    height: 100%;
    margin: 0 5px 0 5px;
    display: inline-block;
    position: relative;
    overflow: hidden
    }



#photoframe .imageContainer img {
    height: 100%;
    padding: 0;
    margin: 0;
    z-index: 1

}


.upload
{
    float: left;
    vertical-align: baseline;
}

Мой HTML

<body>
<div id="headerWrapper">
<div id="header">
  <div id="title">
    <h1>Bass Clef Photography</h1>
  </div>
  <div id="tagline">Passion 4 Live Music & Passion 4 Photography</div>
  <div id="tabsContainer">
    <div class='tab zero'>
      <ul>
        <li><a href="BassClef.html">Home</a></li>
      </ul>
    </div>
    <div class='tab one'>
      <ul>
        <li><a href="#">Music Gallery</a></li>
      </ul>
    </div>
    <div class='tab two'>
      <ul>
        <li><a href="#">About</a></li>
      </ul>
    </div>
    <div class='tab three'>
      <ul>
        <li><a href="#">Clients</a></li>
      </ul>
    </div>
    <div class='tab four'>
      <ul>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
    <div class='tab five'>
      <ul>
        <li><a href="members.php">Members</a></li>
      </ul>
    </div>
  </div>
</div>
</div>
<div id="spacer"></div>
<div id="photoframeContainer">
  <div id="photoframe">
    <div class="imageContainer"><img class="resize" src="uploads/picture02.jpg" alt=""></div>
    <div class="imageContainer"><img class="resize" src="uploads/picture03.jpg" alt=""></div>
    <div class="imageContainer"><img class="resize" src="uploads/picture04.jpg" alt=""></div>
    <div class="imageContainer"><img class="resize" src="uploads/picture05.jpg" alt=""></div>
    <div class="imageContainer"> <img class="resize" src="uploads/picture06.jpg" alt=""></div>
    <div class="imageContainer"><img class="resize" src="uploads/picture07.jpg" alt=""></div>
    <div class="imageContainer"><img class="resize" src="uploads/picture08.jpg" alt=""></div>
  </div>
</div>
</body>

Dan Cundy 07 май 2014, в 02:36

Источник

0

Как бы это работало?
Yooz 06 май 2014, в 23:46
0

я хотел бы, чтобы фоторамка div не складывалась под заголовком при изменении размера браузера.
Dan Cundy 06 май 2014, в 23:48
0

Я не совсем уверен, почему вы использовали фиксированное позиционирование в заголовке или абсолютное позиционирование в области содержимого. То, как они выровнены, статическое позиционирование наиболее целесообразно для заголовка и содержимого, чтобы получить намеченное поведение.
user2246364 06 май 2014, в 23:49
0

Вы имеете в виду, что когда вы прокручиваете страницу, поля контента проходят над элементом поля заголовка? @DanCundy
Brendan 06 май 2014, в 23:51
0

Как это - jsfiddle.net/Le5RE/1
user2246364 06 май 2014, в 23:51
0

Я использовал фиксированный заголовок, поэтому он всегда виден, когда абсолютно позиционированный контент прокручивается горизонтально.
Dan Cundy 06 май 2014, в 23:52
0

@socialconquest , что не так, как я хочу страницу , которая будет отображаться , если вы посмотрите на моей скрипке заголовок остается фиксированной в то время как свитки контента по горизонтали ссылки
Dan Cundy 06 май 2014, в 23:55
0

@Brendan Брендан, да, это правильно.
Dan Cundy 06 май 2014, в 23:58

Показать ещё 6 комментариев

Теги:

html

css

2 ответа

Ещё вопросы

я хотел бы, чтобы фоторамка div не складывалась под заголовком при изменении размера браузера.
Я не совсем уверен, почему вы использовали фиксированное позиционирование в заголовке или абсолютное позиционирование в области содержимого. То, как они выровнены, статическое позиционирование наиболее целесообразно для заголовка и содержимого, чтобы получить намеченное поведение.
Вы имеете в виду, что когда вы прокручиваете страницу, поля контента проходят над элементом поля заголовка? @DanCundy
Я использовал фиксированный заголовок, поэтому он всегда виден, когда абсолютно позиционированный контент прокручивается горизонтально.
@socialconquest , что не так, как я хочу страницу , которая будет отображаться , если вы посмотрите на моей скрипке заголовок остается фиксированной в то время как свитки контента по горизонтали ссылки

user2246364 · Answer 1 · 2014-05-06T22-56-00.000Z

Учитывая ситуацию, у вас есть два хороших варианта и один плохой. Во-первых, сделать все статическое позиционирование и задать ширину набора для контейнера изображений и использовать переполнение: auto на фотоконтейнере. Это даст полосу прокрутки для самого div, как те, которые используются в переполнении стека для кодовых блоков и т.д. (См. Код выше). В противном случае я настоятельно рекомендую использовать слайдер javascript или jquery. Путь проще реализовать, и вам не придется сражаться с css каждый раз, когда вы добавляете немного контента на страницу.

Неверным вариантом является потеря проставки и абсолютное позиционирование элемента #photoframe, а затем добавление padding-top: 242px в #photoframe, например:

#photoframe {
position: static;
padding: 0 25px 0 25px;
    padding-top:242px;
height: 600px;
overflow: visible;
white-space: nowrap;

}

Вот пример. Причина, по которой это плохой вариант, заключается в том, что вам все равно придется сражаться с css, если каждый из вас должен добавлять пункты меню или контент в другом месте на странице. Фиксированное позиционирование действительно является кошмаром в большинстве случаев, и мобильные/планшетные устройства вообще не справляются с этим.

Первая реализация, которую вы предложили, вызвала у меня проблемы с неожиданными пробелами на моей странице, и после того, как я спросил, почему здесь никто не знает и не понимает мой вопрос, я отказался предыдущий вопрос стека . Второе для меня, похоже, похоже на поражение, а третье будет кошмаром, как ты говоришь! Спасибо за ваши предложения, хотя.
и на самом деле ваша примерная скрипка по-прежнему имеет ту же проблему, когда свернутый контент все еще находится под заголовком.
Да, мой плохой. Опять же, фиксированное позиционирование - это кошмар. Вот еще один пример первой реализации, использующей ваш оригинальный jfiddle
Это точно так же, как моя первая реализация, смысл имеет те же проблемы. Это была бы хорошая идея, но по какой-то причине страницу можно прокручивать вертикально, когда фактически весь контент умещается на экране ?! Странный. Надеюсь, кто-нибудь узнает решение, еще раз спасибо.

Matthcw · Answer 2 · 2014-05-06T23-38-00.000Z

Не наказывайте меня, если я ошибаюсь, но, если я правильно понимаю, вы просто не хотите, чтобы вертикальная полоса прокрутки, так что просто добавьте

overflow-y:hidden; класс тела.

скрипка

Вы можете добавить эту строку в ваш исходный код, который я только что построил на Fiddle @ socialconquest ...
Я бы никогда не стал опускать кого-то за попытку помочь мне. Это решение работает ..... пока высота браузера не требует от пользователя прокрутки вверх или вниз для просмотра остальной части страницы. попробуйте на скрипке, которую вы разместили, уменьшив отображаемую часть страницы. Спасибо за ваш вклад, хотя.
Как насчет того, если вы меняете body высоту :auto вместо :100% Скрипки