Есть ли способ для "position: absolute" div сохранить относительную ширину?

Допустим, у меня есть два div, один внутри другого, вот так:

<html>
  <body>
    <div id="outer" style="width:50%">
      <div id="inner" style="width:100%">
      </div>
    </div>
  </body>
</html>

Прямо сейчас, внутренний div имеет ширину 100% от 50% размера экрана или 50% от размера экрана. Если бы я изменил внутренний div на абсолютную позицию, вот так:

<html>
  <body>
    <div id="outer" style="width:50%">
      <div id="inner" style="position:absolute;width:100%">
      </div>
    </div>
  </body>
</html>

В этом случае внутренний блок занимает 100% экранного пространства, потому что его позиция установлена на абсолютное значение.

Мой вопрос таков: есть ли способ сохранить относительную ширину внутреннего элемента div, когда его положение установлено на абсолютное значение?

Ответы

Ответ 1

Добавьте позицию: относительный к вашему внешнему div.

update: Это работает, потому что позиции в position: absolute относятся к первому родительскому объекту, который имеет некоторое позиционирование (отличное от статического). В этом случае такого контейнера не было, поэтому он использует страницу.

Ответ 2

Да. Установите внешнее положение: относительное.

http://jsfiddle.net/57673/

.outer
{
  width: 50%;
  height: 200px;
  position: relative;
  border: 1px solid red;
}

.inner
{
  width: 100%;
  position: absolute;
  height: 100%;
  border: 1px solid blue;
}