html - css - 顶部超越父元素

Question

我正在使用 top 属性使 div 从其父级的顶部开始并在底部结束。底部正在工作。但出于某种原因，高层开始了两个 parent 的回归。这是我的代码:

<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;  }

由于 top: 0，'.details-coursework .boxx-content' 应该从 'boxx details-coursework' 的顶部开始。问题是“.details-coursework .boxx-content”从 class=right 开始。它的父元素是'boxx details-coursework'，所以应该设置top。我该如何解决这个问题？

这是 boxx 的一些其他 css，但我认为它不相关:

.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。我包含了更多代码，以便更清楚地看到我正在尝试做的事情。查看右下角的 block 以查看我正在尝试做什么:

http://jsfiddle.net/3ycGZ/

Answer 1

为了相对于父项定位子项，您需要声明父项的位置是相对的。我相信这应该可以解决您的问题。

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