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

由于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。我添加了一些代码，以便更加明显我想要做的事情。看看右下方的块看看我想要做什么：

http://jsfiddle.net/3ycGZ/

Answer 1

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

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

Answer 2

ginowa320是对的。绝对定位的元素使用第一个非静态定位元素作为参考。您可以在此处查看此示例：W3Schools css positioning example

css - 顶部经过父元素

2 个答案: