Содержимое после относительного размещения div

Если я показываю div относительно и даю ему верхний край, должен ли я предоставить все последующее содержимое тем же самым верхним краем? Потому что следующий контент будет после регулярной позиции элемента.Содержимое после относительного размещения div

http://jsfiddle.net/u9cgu6er/

Как вы можете видеть здесь, то blue ДИВ находится над red один, который просто следует исходное положение Блу.

Есть ли способ сделать red 20px ниже, не делая его relative, а? Другими словами, не делайте этого со всем содержимым.

#a { 
 
    width:100%; 
 
    background-color:yellow; 
 
    height:50px; 
 
} 
 
#b { 
 
    position:relative; 
 
    top:20px; 
 
    width:50%; 
 
    background-color:blue; 
 
    height:50px; 
 
} 
 
#c { 
 
    width:100%; 
 
    background-color:red; 
 
    height:50px; 
 
}

<div id="a"></div> 
 
<div id="b"></div> 
 
<div id="c"></div>

источник

2014-10-21 George Irimiciuc

Почему бы не использовать 'margin-top', а не позиционировать элемент? –

Действительно. «верхний» не является разницей - он перемещает элемент относительно верха его естественного положения в потоке. Другие элементы вне его не будут знать о его изменении, но если вы просто используете поля, это будет работать нормально. – Semicolon

Также вы можете найти это полезным: http://stackoverflow.com/questions/4036176/css-top-vs-margin-top –

Добавить margin-top: 20px; в свой #c. @HashemQolami прав, вам будет проще поддерживать ваш css, используя margin-top на #b вместо позиции relative, если сможете.

источник

2014-10-21 17:49:33 Pipo

На самом деле я имел в виду использование 'margin-top' для' # b', а не 'top' смещение. Это Hashem BTW :) –

@HashemQolami, извините за ошибку с вашим именем !! Я исправил это, мне очень жаль! – Pipo

Проще всего просто установить margin-top#b в 20px, а затем #c будет следовать за ним.

#a { 
 
    width:100%; 
 
    background-color:yellow; 
 
    height:50px; 
 
} 
 
#b { 
 
    margin-top:20px; 
 
    width:50%; 
 
    background-color:blue; 
 
    height:50px; 
 
} 
 
#c { 
 
    width:100%; 
 
    background-color:red; 
 
    height:50px; 
 
}

<div id="a"></div> 
 
<div id="b"></div> 
 
<div id="c"></div>

Таким образом, он не удаляет #b из потока документов.

источник

2014-10-21 17:50:47 Scimonster

Добавить маржу 40px к началу #c

источник

2014-10-21 17:51:00 KM123

Вы можете добавить margin-bottom: 40px; к #b элементу:

#a { 
 
    width:100%; 
 
    background-color:yellow; 
 
    height:50px; 
 
} 
 
#b { 
 
    position:relative; 
 
    top:20px; 
 
    width:50%; 
 
    background-color:blue; 
 
    height:50px; 
 
    margin-bottom: 40px; 
 
} 
 
#c { 
 
    width:100%; 
 
    background-color:red; 
 
    height:50px; 
 
}

<div id="a"></div> 
 
<div id="b"></div> 
 
<div id="c"></div>

или margin-top: 40px; для #c элемента:

#a { 
 
    width:100%; 
 
    background-color:yellow; 
 
    height:50px; 
 
} 
 
#b { 
 
    position:relative; 
 
    top:20px; 
 
    width:50%; 
 
    background-color:blue; 
 
    height:50px; 
 
    
 
} 
 
#c { 
 
    width:100%; 
 
    background-color:red; 
 
    height:50px; 
 
    margin-top: 40px; 
 
}

<div id="a"></div> 
 
<div id="b"></div> 
 
<div id="c"></div>

Любой из них будет работать.

источник

2014-10-21 17:51:08

Содержимое после относительного размещения div

ответ

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