CSS | positionでabsoluteの中にabsoluteという入れ子構造

2020-10-05CSS ポジション,CSS

CSSのpositionプロパティで「absolute」を使う場合はそのままウィンドウ左上隅を基準として使うことはあまりなく、親、祖先の要素に「relative」を指定してその左上角を基準にしているケースが多いはずです。

では、absoluteが指定された要素の左上角を基準位置にして、その中に置く子要素をabsoluteで配置したい場合は？という部分を少し紹介しています。

absoluteに必要な指定はrelativeではなく、static以外

「absolute」が基準として必要とする要素のposition指定は「relative」ではなく「static以外」です。

※「static」はpositionプロパティの初期値、未指定状態になります。

当然「relative」指定した要素ばかりを基準として使っていますので、ふと「absolute」の中に「absolute」という入れ子構造が必要になった場合に、戸惑う私もいることと思います。

もしかすると、「fixed」や「sticky」の中に「absolute」ってどうするのか？っと戸惑う方もいるかもしれません。

「static以外」という点を思い出す、気付けるまでは、ですね。

以下は「absolute」の中に「absolute」を入れ子構造にした動作サンプルです。

See the Pen CSS position absolute in absolute by yochans (@yochans) on CodePen.

<div class="container">
	<div class="box1">
		<div class="box2">
			<div class="box3">
			</div>
	</div>
	</div>
</div>

.container{
	position: relative;
	width: 100%;
	height: 200px;
	color: #FFF;
}

.box1 {
	width: 150px;
	height: 150px;
	position: absolute;
	top: 20px;
	left: 20px;
	background: #0091EA;
}

.box2 {
	width: 110px;
	height: 110px;
	position: absolute;
	top: 20px;
	left: 20px;
	background: #00E676;
}

.box3 {
	width: 70px;
	height: 70px;
	position: absolute;
	top: 20px;
	left: 20px;
	background: #FFAB00;
}

同じクラス名を使った場合はどうなるのか、試してみました。

See the Pen CSS position absolute in absolute 2 by yochans (@yochans) on CodePen.

<div class="container">
	<div class="box">box1
		<div class="box">box2
			<div class="box">box3
			</div>
	</div>
	</div>
</div>

.container{
	position: relative;
	width: 100%;
	height: 200px;
}

.box {
	width: 150px;
	height:  150px;
	position: absolute;
	top: 20px;
	left: 20px;
	border: solid 1px #0091EA;
}