правильный способ выравнивания вложенного div?

Question

Может ли кто-нибудь сказать мне лучший способ расположить вложенный div над текущим div .. в основном получил 2 divs ... внешний и внутренний .. внутренний должен быть 20 пикселей в и 20 пикселей вниз из текущего ..

у меня есть

<div> 
     <div> 

     </div> 
</div> 

Я попытался установить внутренние дела до относительной и верхней 20px и левой 20px и, казалось, работали в IE7, но не в FF или IE8

Answer 1

Установите наружные один в положение: относительное и внутреннее положению: абсолютное, затем установите верхний и левый по мере необходимости. Он будет использовать внешний div как свои границы, а не страницу. Если вам нужно установить его, убедитесь, что ваш z-index правильно установлен на обоих div.

Если внутренний div пуст, убедитесь, что вы определяете ширину/высоту, иначе он не будет отображаться на странице.

Answer 2

Как правило, можно было установить margin: 20px на внутреннем <div> или padding: 20px на внешний, в зависимости от того, какой именно эффект вы ищете.

Редактировать: С другой стороны, существует слишком много способов сделать несколько очень похожих эффектов, которые соответствуют вашему описанию. Возможно, вы могли бы задать свой вопрос немного конкретнее? :-)

Answer 3

Установите контекст позиционирования внешнего div в положение «relative», а затем вы можете перемещать любое внутреннее содержимое вокруг w/position: absolute. Используя разметку, то CSS будет:

div { position: relative; } 
div div { position: absolute; top: 20px; left: 20px; } 

Answer 4

div1 { 
    padding-left: 20px; 
    padding-top: 20px; 
} 

div2 { 
    margin: 0px; 
} 

Где div1 является Outter ДИВ и div2 является внутренними делами. Это должно сделать это. Я думаю, что этот подход является более безопасным, чем возиться с абсолютными и относительными позиционирование и такими ...

Answer 5

Вариант 1:

inner-div { margin-top: 20px; margin-left: 20px; } 

Вариант 2:

outer-div { padding-top: 20px; padding-left: 20px; } 

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

margin: top right bottom left;