如何相对于另一个元素静态定位HTML元素？

Question

假设我有这个HTML：

<div id="article">
 <div id="article-text">...</div>
 <div id="slogan">Best Article Is Best</div>
</div>

如何#slogan始终位于top: 100内的#article？

我已尝试在#slogan上使用top: 100设置绝对和相对位置，但如果文章文字大于100px，则#slogan将被推下。

有没有办法绝对（或静态地）定位一个元素相对于它的父元素，无论父母有什么内容？

Answer 1

#article{
    position: relative;
}
#slogan{
    position: absolute;
    top: 100px;
}