Заполнение перекрывающих дочерних divs до родительского содержимого div.

Question

У меня есть родительский элемент div, который имеет отступы и определяется с помощью стиля рамки. Я пытаюсь вложить несколько перекрывающихся дочерних div внутри родительского элемента и иметь дочерние divs, заполняющие родительский контейнер, а только часть содержимого в полевой модели родительского контейнера.

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

Это CSS, что я пытался, но он не работает:

* { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
} 
.container { 
    width: 300px; 
    height: 60px; 
    padding: 25px 12px 12px; 
    border: thin solid red; 
    position: absolute; 
} 
.layer { 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    float: left; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
} 

Пожалуйста, смотрите мой jsfiddle для примера того, что я пытаюсь сделать: http://jsfiddle.net/dwp1v0uu/

Если вы осмотрите " контейнер ", вы увидите, что оно составляет 300px на 60 пикселей в целом, но часть контента составляет всего 274px на 21px. Каждый из вложенных дочерних divs составляет 298px на 58px, но я хочу, чтобы они были ближе к размеру 274px на 21px.

Answer 1

Не могли бы вы указать расположение ребенка так же, как прокладка?

(приписка вам не нужен поплавок, если вы позиционируете абсолютными)

.layer { 
    top: 25px; 
    right: 12px; 
    bottom: 12px; 
    left: 12px; 
} 

Answer 2

Вы можете создать еще один элемент между ними. Это решит вашу проблему.

HTML:

<div class="container"> 
    <div class="layer-wrapper"> 
    <div class="layer">a</div> 
    <div class="layer">b</div> 
    <div class="layer">c</div> 
    </div> 
</div> 

CSS:

.layer-wrapper { 
    position: relative; 
    height: 100%; 
} 

JSFiddle

Надеется, что это помогает!