Как сделать относительный div span своим абсолютным содержанием?

Question

Очень простой вопрос здесь, но он несколько раз озадачивал меня: Как сделать относительно позиционированный div span своим абсолютно позиционируемым контентом?

http://jsfiddle.net/X6ay2/10/

HTML

<div class="outer"> 
    <div class="inner"></div> 
</div> 

CSS:

.outer { 
    display: inline-block; 
    position: relative; 
    background: blue; 
    height: 100px; 
    padding: 20px; 
} 
.inner { 
    position: absolute; 
    width: 50px; 
    height: 50px; 
    background: red; 
} 

Answer 1

Вы не можете непосредственно на самом деле, так как абсолютные расположенные элементы из потока документов и поэтому на самом деле не «принадлежат» к своим родителям больше. Одним из способов обхода решения является установка абсолютного позиционного div на 100% ширину и left: 0, что заставит его перейти к ширине родителя.

.outer { 
    display: inline-block; 
    position: relative; 
    background: blue; 
    height: 100px; 
    padding: 20px; 
} 
.inner { 
    position: absolute; 
    width: 100%; 
    left: 0; 
    height: 50px; 
    background: red; 
} 

http://jsfiddle.net/X6ay2/14/

Протест на это, если внутренний DIV имеет отступы, он будет выходить за пределы 100%. Чтобы остановить это, сделайте внутренний div использующим свойство box-sizing.

.inner { 
    padding: 10px; 
    box-sizing: border-box; 
    -moz-box-sizing:border-box; 
} 

http://jsfiddle.net/X6ay2/15/

Answer 2

ширина набор наружной, чтобы удовлетворить ваши потребности. Пример имеет

width:50px 

http://jsfiddle.net/X6ay2/12/