CSS - 顶过去的父元素 [英] css - top going past parent element

问题描述

我使用top属性使div从父项的顶部开始，并在底部结束。底部正在工作。不过出于某种原因，顶端开始回到父母的双亲身上。这是我的代码：

I am using the top attribute to make a div begin at the top of its parent and end at the bottom. The bottom part is working. For some reason though, the top is beginning two parents back. Here is my code:

<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：

Here is the 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'，所以这就是应该设置顶部的地方。我该如何解决这个问题？

Since top: 0, '.details-coursework .boxx-content' should begin at the top of 'boxx details-coursework'. The problem is that '.details-coursework .boxx-content' is beginning at class=right. its parent element is 'boxx details-coursework', so thats where top should be set. How do i fix this?

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

Here is some other css for boxx, but i don't think it is relevant:

.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。我包含了一些更多的代码，这样我就可以更清楚地看到我正在做什么。看看右下角的块，看看我想做什么：

Here is a jsfiddle. I included some more code so it would be more visible what I am trying to do. Look at the bottom-right block to see what I am trying to do:

http://jsfiddle.net/3ycGZ/

推荐答案

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

In order to position the child relative to the parent, you need to declare that the parent's position is relative. I believe this should remedy your issue.

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

这篇关于CSS - 顶过去的父元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！