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

Question

假设我有这个 HTML:

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

如何将 #slogan 始终放在 #article 中的 top: 100？

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

有没有办法相对于其父元素绝对(或静态？)定位元素，无论父元素有什么内容？

Answer 1

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