css - 如何在没有使用负边距的情况下将元素定位在 div 顶部？

Question

如何在不使用负边距或填充的情况下将元素放置在 div 顶部？检查图像以查看我要实现的目标：

灰色区域是 div #content，蓝色是 h1。我需要 h1 在#content 中。我认为如果我将 h1 放在 #content div 之前并使用 z-index ，我可以实现这一点，但这不是唯一的方法，是吗？

<div id="content">
<h1>text here</h1>
</div>

Answer 1

你可以用positioning。

#content h1 {position: relative; top: -15px;}

或者用一种更好的方式说，position两者兼而有之。

#content {position: relative;}
#content h1 {position: absolute; top: -15px;}

关于负值的查询top：

负值是允许的，这将导致元素以与上面已经说明的方向相反的方向移动。

参考：

• 站点点