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

Question

假设我有这样的HTML:

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

如何在#article中始终将#slogan定位在top: 100上?

我试过在#slogan上设置绝对和相对位置，并使用top: 100，但如果文章文本大于100px，那么#slogan将被下推。

是否有一种方法可以绝对地(或静态地)定位一个元素相对于它的父元素，而不管父元素有什么内容?

Answer 1

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