css - верхний элемент, проходящий мимо родительского элемента

Question

Я использую атрибут top, чтобы div начинался в верхней части его родителя и заканчивался внизу. Нижняя часть работает. По какой-то причине, однако, вершина начинается с двух родителей назад. Вот мой код:

<div class="right"> 
    <div class="boxx details-history"> 
     <div class="boxx-content"> 
      Box content goes here 
     </div> 
    </div> 
    <div class="boxx details-coursework"> 
     <div class="boxx-content custom-scroll"> 
      Box content goes here 
     </div> 
    </div> 
</div> 

Вот CSS-код:

.details-coursework .boxx-content { padding: 0 0 0 0!important; position: absolute; 
    bottom:0; top: 0; } 

С топ: 0, '.details-курсовой .boxx-контентом' должны начинаться в верхней части «BOXX деталей-курсовой ». Проблема в том, что «.details-coursework .boxx-content» начинается с класса = справа. его родительский элемент - это «boxx details-coursework», поэтому для этого должен быть установлен верх. Как это исправить?

Вот некоторые другие CSS для BOXX, но я не думаю, что это имеет отношение:

.boxx { margin-top:11px; } 
.boxx:first-child { margin-top:0; } 
.boxx .boxx-content { background: #fff; padding:4px 18px; color:#a7a7a7; 
    font-family: 'Roboto', sans-serif; font-weight:300; border-radius: 0 0 3px 3px;  } 

Вот jsfiddle. Я включил еще один код, поэтому было бы более понятно, что я пытаюсь сделать. Посмотрите на нижний правый блок, чтобы увидеть то, что я пытаюсь сделать:

http://jsfiddle.net/3ycGZ/

Answer 1

Для того, чтобы расположить ребенка по отношению к родителю, вам нужно объявить, что позиция родителя относительна. Я считаю, что это должно решить вашу проблему.

.boxx.details-coursework { 
    position: relative; 
} 

Answer 2

ginowa320 является правильным. Абсолютно позиционированные элементы используют первый нестатический позиционированный элемент в качестве эталона. Вы можете увидеть пример этого: W3Schools css positioning example