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

Question

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

У меня есть

 <div>
      <div>

      </div>
 </div>

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

Answer 1

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

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

Answer 2

Вариант 1:

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

Вариант 2:

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

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

margin: top right bottom left;

Answer 3

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

div2 {
  margin: 0px;
}

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

Answer 4

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

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

Answer 5

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

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