родительское отрицательное поле с вложенными плавающими элементами не будет следовать за родителем, если объект перекрывается

0

Хе-хе, извините за длинный титул, но мне нужно исправить это и уже на нем.

В основном есть заголовок, и я хотел бы перемещать содержимое под ним. Все относительное (сохраняя его в центре), поэтому заголовок имеет верхнюю границу поля, z-index, ecc.

Страница относительна с отрицательным полем и содержит вложенные плавающие столбцы, которые не будут проходить мимо заголовка (dammit) и не могут понять, почему.

Я хотел бы избегать использования абсолютного позиционирования, если это возможно. Здесь код:

<div class="header wrapper-standard">
    <div class="logo">
        <div class="inside">hello</div>
    </div>
    <div class="menu-wrapper-outer">asda</div>
    <div class="clear"></div>
</div>
<div class="about-page wrapper-standard notop">
    <div class="about-page content">
        <div class="about-block wrapper-long">
            <div class="col col-left text-first">
                asda
            </div>
            <div class="col col-right">
                lol
            </div>
            <div class="clear"></div>
        </div>
        <div class="about-block wrapper-long">
            <div class="col col-left text-first">
                asda
            </div>
            <div class="col col-right">
                lol
            </div>
            <div class="clear"></div>
        </div>
        <div class="about-block wrapper-long">
            <div class="col col-left text-first">
                asda
            </div>
            <div class="col col-right">
                lol
            </div>
            <div class="clear"></div>
        </div>                   
    </div>
</div>

Здесь скрипка: скрипка

Благодарю.

  • 0
    Просто добавьте float: left в .wrapper-standard.notop fiddle
  • 0
    @user2347441 user2347441 - красная полоса и черная полоса остаются неподвижными, а под ними прокручивается содержимое зеленого и бирюзового цветов?
Показать ещё 2 комментария
Теги:

1 ответ

0

Вот очень простой пример того, как вы можете иметь фиксированную ширину, центрированную страницу с фиксированным заголовком, который позволяет потоку содержимого под ним:

CSS:

<style type="text/css">
    .wrapper{
        height:600px;
        margin:0 auto;
        width:400px;
        background-color:#0ff;

    }
    .header_wrapper {
        position:fixed;
        background-color:#ffd800;
    }        

    .header {
        width:400px;
        background-color:#f00;
        height:100px;
    }
    .page {
        padding-top:100px; /*height of header*/
    }    
</style>

HTML:

<body>
    <div class="wrapper">
        <div class="header_wrapper">
            <div class="header">Header</div>
        </div>
        <div class="page">
            Content will be here bla bla etc
        </div>
    </div>
</body>

Вот скрипка, чтобы вы могли ее увидеть: http://jsfiddle.net/JjBG5/1/

Поделиться
  • 0
    Общая цель не использовать абсолютное / фиксированное позиционирование, но спасибо
  • 0
    @grumpyGAMER вы упомянули абсолютное, но не фиксированное - вы не сможете сделать то, что пытаетесь достичь, если не исправите что-то, это единственный способ удалить элемент из потока документа.
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню