-1

Я использую 2 div элементов. Эти элементы перекрывают друг друга, но я хочу, чтобы они следовали один за другим.Элементы Div не правильно позиционируются

<!DOCTYPE> 
 
    <html> 
 
    <head> 
 
    <title>Online</title> 
 
    <style> 
 
    .rectangle { 
 
    \t min-height: 40px; 
 
    \t margin-bottom: 20px; 
 
    \t border: 1px solid transparent; 
 
    \t height: 65px; 
 
    \t position: fixed; 
 
    \t top: 0px; 
 
    \t right: 0px; 
 
    \t left: 0px; 
 
    \t border-radius: 0px; 
 
    \t background-color:#67518e; 
 
    \t z-index:15; 
 
    \t 
 
    } 
 
    .section-content { 
 
     padding-top: 30px; 
 
     padding-bottom: 30px; 
 
     border-top: 1px solid green; 
 
     border-bottom: 1px solid green; 
 
    \t position: absolute; 
 
    \t right: 0; 
 
    \t left: 0; 
 
    \t z-index: 10; 
 
    \t background-color: yellow; 
 
    \t } 
 
    </style> 
 
    </head> 
 
    <body> 
 
    \t <div class="rectangle"> \t 
 
    \t </div> \t 
 
    <div class="section-content"> 
 
    </div>

2015-01-05 Siddharth A

который ДИВ и как вы хотите сделать –

Какого черта, второй вопрос в течение 1 часа? http://stackoverflow.com/questions/27776599/container-not-wrapping-the-content –

Удалите объявления позиционирования, так как это вызывает проблемы: (Я также удалил некоторые «другие» css, которые не используются).

С Position:absolute; будет

присоединяется к его ближайшему предку с относительной высотой

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

Для того, чтобы сделать дивы "заполнить ширину" страницы, я включил "простой сброс CSS", путем включения:

html,body{ 
    margin:0; 
    padding:0; 
    }

в моем CSS

html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.rectangle { 
 
    height: 65px; 
 
    background-color: #67518e; 
 
    width: 100%; 
 
} 
 
.section-content { 
 
    padding-top: 30px; 
 
    padding-bottom: 30px; 
 
    border-top: 1px solid green; 
 
    border-bottom: 1px solid green; 
 
    background-color: yellow; 
 
    width: 100%; 
 
}

<div class="rectangle"> 
 
</div> 
 
<div class="section-content"> 
 
</div>

В качестве примечания: Я хотел бы подчеркнуть ваше использование

min-height: 40px;

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

LIVE DEMO OF STICKY HEADER

источник

2015-01-05 11:36:09 jbutler483

его работы. Но я хочу, чтобы divs полностью закрывали левую и жесткую стороны страницы. –

, чтобы заполнить ширину страницы. @ jbutler483 –

Его работа хорошая. У меня есть еще одно сомнение. Я хочу, чтобы .rectangle фиксировался на экране. Является ли это возможным? @ jbutler483: –

Это происходит потому, что вы используете position: fixed к элементу с классом .rectangle. Одно решение без изменения положения является использование margin-top: 59px к элементу .section-content:

.rectangle { 
 
    min-height: 40px; 
 
    margin-bottom: 20px; 
 
    border: 1px solid transparent; 
 
    height: 65px; 
 
    position: fixed; 
 
    top: 0px; 
 
    right: 0px; 
 
    left: 0px; 
 
    border-radius: 0px; 
 
    background-color: #67518e; 
 
    z-index: 15; 
 
} 
 
.section-content { 
 
    padding-top: 30px; 
 
    padding-bottom: 30px; 
 
    border-top: 1px solid green; 
 
    border-bottom: 1px solid green; 
 
    position: absolute; 
 
    right: 0; 
 
    left: 0; 
 
    z-index: 10; 
 
    background-color: yellow; 
 
    margin-top: 59px; 
 
}

<div class="rectangle"></div> 
 
<div class="section-content">

Вы поближе к documentation о положении может.

источник

2015-01-05 11:34:19

Что делать, если OP прокручивает страницу, которая фиксировала div, скроет элемент страницы –

@sanojlawrence в соответствии с OP _i хотят, чтобы элементы следовали одному после Другие_. –

без использования фиксированного метода любым другим способом –

Вы можете либо сделать как <div> s <span> s, либо обеим классам CSS, вы добавите следующую строку: display: inline;.

источник

2015-01-05 11:34:34 derjoachim

Получил! Спасибо за помощь. –

Элементы Div не правильно позиционируются

ответ

LIVE DEMO OF STICKY HEADER

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