Как установить позицию элемента на 5 пикселей ниже элемента с фиксированной позицией

0

Пример: 1-й дивизион:

<div style='position: fixed; width=100%'> ....</div>

Теперь я хочу добавить еще один Div 5px прямо под предыдущим Div. Так я и сделал

<div style='padding-top:5px; width=100%'> ....</div>

Но это не сработало, кажется, что padding-top сравнивает себя с верхней частью окна, но не с предыдущим Div. Если я удалю position: fixed; в 1-м дивизионе это будет хорошо, но я этого не хочу.

Я хочу, чтобы позиция 1-го дивизиона была зафиксирована, а вторая позиция Div - 5 пикселей ниже 1-го. Итак, как это сделать?

Теги:

5 ответов

3
Лучший ответ

position: fixed удаляет элемент из регулярного потока. Вы больше не можете использовать позиционирование потока.

Вероятно, есть правильные способы делать то, что вы хотите, но я не знаю, чего вы хотите, потому что вы рассказали нам об Y, а не X: https://meta.stackexchange.com/questions/66377/what-is-the- ху-проблема

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

<div id="header" style="position: fixed; top: 0; width: 100%; height: 20px;">
<div id="content" style="margin-top: 20px;">Content goes here</div>

Если заголовок может изменить высоту, настройте свой CSS так, чтобы заголовок и контент изменили их высоту и содержание соответственно.

<div id="container" class="adjustheaderheight">
    <div id="header">
    <div id="content">Content goes here</div>
</div>

#header { position: fixed; top: 0; width: 100%; height: 20px; }
#content { margin-top: 20px; }
#container.adjustheaderheight #header {
    height: 40px;
}
#container.adjustheaderheight #content {
    margin-top: 40px;
}

Если ваш заголовок динамически меняет высоту, вам нужно будет динамически изменять смещение содержимого, хотя я бы настоятельно советовал вам не иметь динамический заголовок.

Поделиться
  • 0
    Я хочу, чтобы фиксированный заголовок и другие элементы были ниже этого фиксированного заголовка. это просто
  • 0
    Смотрите мой обновленный ответ.
Показать ещё 4 комментария
0

Вы попробовали маржу? margin-top: 5px

Поделиться
  • 0
    margin-top не работал
0

Если вы попробовали Margin, и он не работает, не стесняйтесь использовать отступы, если у вас нет цвета фона или изображения в div, вы не сможете отличить два способа сделать это,

Поделиться
0

положите два div в обертку неподвижным. Также у вас есть недопустимый синтаксис css = 100% должна быть шириной: 100%.

<div style="position: fixed;">
   <div style=' width:100%'> ....</div>
   <div style='margin-top:5px; width:100%'> ....</div>
</div>

однако, это делает 2 divs фиксированным... и это может быть не то, что вы хотите. Вы можете сделать следующее:

    <div style='position: fixed; width:100%'> ....</div>
   <div style='position:absolute; width:300px;height:200px;top:300px;left:300px'> ....</div>

Значения css являются, например,...

ОБНОВИТЬ:

это то, чего ты хочешь? http://jsfiddle.net/kasperfish/K8N4f/1/

<div id="fixed">fixed</div>
<div id="widget" >content <br>hjgjhgjhgjhgh</div>

#fixed{
    width:100%;
    position:fixed;
    background:yellow;
    height:50px;
    z-index:2;
}
#widget{

    background:blue;
    position: absolute;
    top:55px;
    margin-top:15px;
    width:100%
}
Поделиться
  • 0
    нет, я хочу, чтобы 1-й Div был исправлен, а 2-й Div мог иметь высоту, основанную на виджете внутри. Так что, когда у 2-го Div есть больше контента, тогда я могу прокрутить, чтобы просмотреть контент, пока все еще вижу 1-й Div
  • 0
    обновил мой ответ с помощью jsfiddle
Показать ещё 1 комментарий
0

Возможно, вы захотите включить оба эти подразделения в другое подразделение и зафиксировать эту новую позицию внешнего разделения. Вот так --->

<div style='position: fixed; width=100%'>
  <div style='width=100%'> ....</div>
  <div style='padding-top:5px; width=100%'> ....</div>
</div>
Поделиться
  • 0
    но я не хочу, чтобы второй Div был исправлен
  • 0
    Ответ выше (первый ответ в теме) является идеальным решением вашей проблемы.

Ещё вопросы

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