html - CSS-超越父元素的顶部

我正在使用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;  }

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

这是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。我包含了更多代码，因此可以更加清楚地看到我要执行的操作。查看右下角的块，以查看我要执行的操作：

http://jsfiddle.net/3ycGZ/

最佳答案

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

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

关于html - CSS-超越父元素的顶部，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/21742350/