Исправлено div в верхней части страницы

Question

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

Добавление margin-top позиционирует главный div ниже фиксированного div, но также снимает ту же сумму в нижней части страницы.

Что я делаю неправильно?

Live Demo

body { 
 
    background-color: #00FFFF; 
 
} 
 
.fixed { 
 
    width: 100%; 
 
    position: fixed; 
 
    background-color: #C0C0C0; 
 
} 
 
.main { 
 
    background-color: #FFFFFF; 
 
} 
 
.expand { 
 
    height: 800px; 
 
}

<div class="fixed"> 
 
    fixed div line 1<br /> 
 
    fixed div line 2<br /> 
 
    fixed div line 3<br /> 
 
</div> 
 
<div class="main"> 
 
    <div class="expand"></div> <!-- For demo purposes only --> 
 
</div>

Answer 1

Вам просто нужно добавить маржу-сверху основной DIV, равной высоте неподвижного дел. Например, если у вас есть 24px высокий фиксированный div:

#fixed-div { 
    position: fixed; 
    height: 24px; 
} 

#main-div { 
    margin-top: 24px; 
} 

Answer 2

Попробуйте добавить «position: relative» в верхнем div.

<div style="width: 100%; opacity: .6; position: fixed; margin-left: auto; margin-right: auto; background-color: #C0C0C0; position: relative;"> 
    fixed div line 1<br /> 
    fixed div line 2<br /> 
    fixed div line 3<br /> 
</div> 

Answer 3

Вам нужен верхний край на вас основной DIV со значением больше, то ваш фиксированной высоте DIVS Так что, если ваш фиксированный DIV будет 60px высокий Make маржин-топ: 62px для основного DIV также можно избавиться от margin-left и right и все поля, такие как эта маржа: 60px auto; если 60px не подходит для вас в нижней части основного div, вы можете сделать маржу: 60px auto 0px auto;

Надеется, что это помогает --Joshua Джозеф Bissot

Answer 4

Есть хороший ответ, реверанс Джошуа К.

Я буду определять класс не назвало-JS (может быть любым имени класса), который устанавливает положение от «фиксированного» div до относительного. Это поместит «фиксированный» div над основным div, хотя фактически не фиксируется на месте. Затем с помощью JavaScript я установил div в позицию: fixed и установил margin-top главного div на высоту «фиксированного» плюс коэффициент выдумки, например 5 или 6 пикселей.

Таким образом, если JavaScript включен, «фиксированный» div фактически будет фиксирован, а крайняя граница главного div будет перемещена вниз, чтобы показать весь div.

Если JavaScript не включен, «фиксированный» div по-прежнему будет виден и над основным div, но он будет прокручиваться со страницы.

Могу ли я пометить ответ как лучший ответ? Если да, то как?

Остановить прессы;

Я мог бы просто установить положение «фиксированного» div относительно (в классе CSS или использовать stye = на элементе) и использовать JavaScript, чтобы изменить его на фиксированный и установить верхний край основного div соответственно , Это, я думаю, устраняет необходимость в другом классе с именем no-js или таким.

---

Я создал другую страницу, включающую изменения, необходимые для выполнения задачи. It is at http://thetesting.site/fixeddiv/fixedheader-fixed.html

Answer 5

Для достижения эффекта, которую вы ищете, вы можете использовать комбинацию из display: table для родителей и display: table-row для каждого из прямых потомков.

• height: 100%html, body, .wrap, .main, .inner.
• Wrap нынешние "родители" в DIV с классом .wrap
• Set display: table и width: 100% на .wrap.
• не указан display: table-row на .fixed, .main
• Wrap текстовое содержание .main в DIV с классом .inner
• Набор overflow: auto на .inner

Таким образом, независимо от того, каков размер верхней DIV есть, .main всегда будет находиться под .fixed.

display: table поддерживается IE > 7 и другими современными браузерами.

html, body, .wrap, .main, .inner { 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 
.wrap { 
 
    box-sizing: border-box; /* Include border width in sizing */ 
 
    border: 8px solid #00FFFF; /* Use a border instead of relying on margins */ 
 
    display: table; 
 
    width: 100%; 
 
} 
 
.fixed, .main { 
 
    display: table-row; 
 
} 
 
.inner { 
 
    overflow: auto; 
 
} 
 
.expand { height: 800px; } 
 
.fixed { background-color: #C0C0C0; }

<div class="wrap"> 
 
    <div class="fixed"> 
 
    fixed div line 1<br /> 
 
    fixed div line 2<br /> 
 
    fixed div line 3<br /> 
 
    </div> 
 
    <div class="main"> 
 
    <div class="inner"> 
 
     <div class="expand"></div> <!-- For demo purposes only --> 
 
    </div> 
 
    </div> 
 
</div>