z-index：位置指定された要素のZ軸（レイヤー）の重なり順を指定する

/* キーワード値 */
z-index: auto;

/* <integer>値 */
z-index: 0;
z-index: 3;
z-index: 999;
z-index: -3;
z-index: -999;

/* グローバル値 */
z-index: inherit;
z-index: initial;
z-index: revert;
z-index: unset;

<section class="samp_box">
	<!--=== 切り替えスイッチ用 ===-->
	<input type="radio" name="s" id="zi_3">
	<input type="radio" name="s" id="zi_4">
	<input type="radio" name="s" id="zi_5">
	<!--/=== 切り替えスイッチ用 ===-->
	<p>z-index: 3;</p>
	<p>z-index: 5;</p>
	<div id="item_1">item_1</div>
	<div id="item_2">item_2</div>
	<div id="item_3">item_3</div>
</section>
<cection class="control">
	<label for="zi_3">z-index: 3;</label>
	<label for="zi_4">z-index: 4;</label>
	<label for="zi_5">z-index: 5;</label>
</cection>

.samp_box {
	position: relative;
	width: 100%;
	height: 220px;
	padding: 0 1rem 1rem;
	background-color: #eee;
	overflow: auto;
}
.samp_box > p {
	position: relative;
	padding: .5rem;
	border: 1px solid #333;
	background-color: #fff;
	text-align: center;
}
.samp_box > p:nth-of-type(1) {
	top: 30px;
	z-index: 3;
}
.samp_box > p:nth-of-type(2) {
	top: 60px;
	z-index: 5;
}
.samp_box > div {
	position: absolute;
	left: 50%;
	width: 100px;
	height: 200px;
	padding: .5rem;
	border: 1px solid #999;
}
#item_1 {
	top: 10px;
	margin-left: -170px;
	background-color: #fcc;
}
#item_2 {
	top: 10px;
	margin-left: -50px;
	background-color: #ccf;
}
#item_3 {
	top: 10px;
	margin-left: 70px;
	background-color: #cfc;
}
.control {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	margin-top: 1rem;
	text-align: center;
}
.control > label {
	display: block;
	padding: .3rem .5rem;
	border: 1px solid #ccc;
	background-color: #09f;
	color: #fff;
	text-align: center;
	cursor: pointer;
}
input[type="radio"] {
	display: none;
}
#zi_3:checked ~ #item_1 {
	z-index: 3;
}
#zi_4:checked ~ #item_2 {
	z-index: 4;
}
#zi_5:checked ~ #item_3 {
	z-index: 5;
}