css - 負のマージンを使用して、divの上部に要素を配置するにはどうすればよいですか？

Question

負のマージンやパディングを使用せずに、divの上に要素を配置するにはどうすればよいですか？画像をチェックして、私が達成しようとしていることを確認してください。

灰色の領域はdiv#contentで、青色はh1です。h1を#content内に配置する必要があります。#content divの前にh1を配置し、z-indexを使用すれば、これを達成できると思いますが、それが唯一の方法ではありませんか？

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

Answer 1

positioningを使用できます。

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

または、より良い方法で言えば、position両方にingを与えます。

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

負の値に関するクエリのtop場合：

負の値は許可されており、要素はすでに上で述べた方向とは反対の方向に移動します。

参照：

• サイトポイント