Позиция абсолютного дочернего элемента, игнорирующего поля родителя

Я пытаюсь создать макет для моей веб-страницы, и я хочу создать определенный тип фона для одного из моих разделов. Вот как короткая разметка будет выглядеть следующим образом:Позиция абсолютного дочернего элемента, игнорирующего поля родителя

HTML

<body> 
    <div class="parentContainer"> 
     <div class="childContainer"> 
      Cotent inside the child element. 
     </div> 
    </div> 
</body>

CSS:

.parentContainer{ 
    position:relative; 
    margin:9% 0 9% 20%; 
    background-color:grey; 
} 
.childContainer{ 
    height:50px; 
    position: absolute; 
    top: 0; 
    left: 0; 
    background-color: yellow; 
}

Вот скрипка, а также: http://jsfiddle.net/bS2kv/

Однако дочерний элемент когда он позиционируется абсолютно так же, как в этом случае занимает позицию (верхний: 0, левый t: 0) после учета родительской маржи. Я хочу, чтобы дочерний элемент игнорировал любые значения маржи (которые не фиксировались как 10/20/40px) и устанавливались в крайнем левом верхнем углу родителя. Как это может быть сделано?

источник

2013-12-24 user1240679

-1

Используется ли заполнение вместо поля, соответствующее вашим потребностям? Что-то вроде этого: http://jsfiddle.net/bS2kv/3/

.parentContainer{  
    position:relative; 
    padding:9% 0 9% 20%; 
    background:gray;  
    height:80px; 
} 
.childContainer{ 
    height:50px; 
    position: absolute; 
    top: 0; 
    left: 0; 
    background-color: yellow; 

}

источник

2013-12-24 21:46:40