z-indexが効かない

Question

以下のレイアウトでz-indexが効かず、困っております。
類似の質問がありましたらご容赦ください。

下記<div class="numberGraphic01">1</div>の上に

<div class="selectboxText01">を載せたいと思っています。 flexboxを使用し、orderにて左右を互い違いに反転させるレイアウトで、 position: absolute;は使わない方向で頑張りたいです。 外側の要素1000pxにおさまらない数値なので、flex-shink:1が動作してしまい、flex-shink:0に指定しました。そうすると当然外に溢れ、そしてz-index指定が効きません。

教えていただけますと助かります。
どうぞよろしくお願いします。

html-------
<section id="selectBox">
<ul>
<li class="selectBoxInner">
<div class="numberGraphic01">1</div>
<div class="selectboxText01">
<h2>テキスト</h2>
<p class="selectText">テキスト<span class="mr"><a href="#">more read</a></span></p>
</div>
</li>

           <li class="selectBoxInner">
            <div class="numberGraphic02">2</div>
             <div class="selectboxText02">
              <h2>テキスト</h2>
               <p class="selectText">テキスト<span class="mr"><a href="#">more&nbsp;read</a></span></p>
             </div>
             
    </li>
    <li class="selectBoxInner">
		 <div class="numberGraphic03">3</div>
		<div class="selectboxText03">
    <h2>テキスト</h2>
    <p class="selectText">テキスト<span class="mr"><a href="#">more&nbsp;read</a></span></p></div>
    </li>
         <li class="selectBoxInner">
			  <div class="numberGraphic04">4</div>
			 <div class="selectboxText04">
    <h2>テキスト</h2>
    <p class="selectText">テキスト<span class="mr"><a href="#">more&nbsp;read</a></span></p>
			 </div>
    </li>
    
    
    
  </ul>
  
</section>

htmlここまで--------------------------------------------

#selectBox{
	width:1000px;
	margin:40px auto 40px auto;
	background-color: #fff;
	z-index:-200;
	padding-top:60px;
	padding-bottom:40px;

}

.selectBoxInner{
	display: flex;
	padding:12px 0 12px 0;


}

.numberGraphic01{
	color:#FFF;
	font-size:92px;
	background: url("../images/01.png")left 0 top 0 / 100% auto no-repeat;
	width: 426px;
	height: 150px;
	text-align: center;
    padding-top:100px;
	margin-left:56px;
flex-shrink: 0;
	order:1;
	z-index: 1;
	position: relative;
		
}

.selectboxText01{
	background-color: #fff;
	width:660px;
	height: 174px;
	z-index:100;
	margin-top:43px;
	order:2;
	border:solid 1px #39a26d;
	margin-right:24px;
	flex-shrink: 0;
	
}

.selectboxText01 h2{
	font-size:16px;
	font-weight: lighter;
	margin-top:40px;
	margin-left:36px;
}

.selectboxText01 h2::after{
	content:"";
	display: block;
	background-color: #39a26d;
	width:46px;
	height: 2px;
	margin-top:23px;
}

.selectboxText01 p{
	width:507px;
	text-align: justify;
	font-size:13px;
	margin-left:36px;
	line-height: 1.3em;
	margin-top:21px;
	font-feature-settings: "pwid" 1;
}

.selectboxText01 .mr a{
	color:#39a26d;
	text-decoration: underline;
	
	![イメージ説明](c153b83344d586480902332cb9af93a6.jpeg)
}

Comments

[hatena19]

numberGraphic01の上にselectboxText01を重ねたいということでしょうか。
flexは左右に並べるためのものですが、なぜflexに拘るのでしょうか。

selectboxText01の背景に画像を表示させたいなら、selectboxText01のbackgroundに画像を設定すればいいと思うのですが。

[ema-material]

コメントありがとうございます。
flexにこだわるのは、今後レスポンシブ対応が待っているからです。

質問を編集しカンプの一部をアップしました。
緑の写真画像がnumberGraphic01 で
右の白背景のテキストがselectboxText01です。
selectboxText01の背景に写真を入れたいわけではありません。

どうぞよろしくお願いします。

[kei344]

質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

Answer 1

画像をみるとボックスを重ねたいということですよね。
それと z-index は関係ないと思います。z-index は前後方向の位置指定ですので。
HTMLで後に記述したほうが前面にきますので、なにもしたなくてもselectboxText01が前面にきます。

Flexで横並びにして重ねるなら、ネガティブマージンを設定するといいでしょう。
z-indexは特に必要ないので外してます。

.selectboxText01{
background-color: #fff;
width:660px;
height: 174px;
margin-top:43px;
margin-left: -150px; /*追加 数値は調整してください*/
order:2;
border:solid 1px #39a26d;
margin-right:24px;
flex-shrink: 0;
}

Comments

[ema-material]

ありがとうございます！解決しました。
以下のように指定しました。

htmlで後に記述した方が上に来るだろうとの想定で進めていたのですが、それでも下に潜ってしまい、さらにflex-shiin:1;が効いていたのでデザインが崩れてしまい、混乱していました。
結局、z-indexを使用する羽目にはなりましたが、解決しました。ありがとうございます。

.numberGraphic01{
color:#FFF;
font-size:92px;
background: url("../images/01.png")left 0 top 0 / 100% auto no-repeat;
width: 426px;
height: 150px;
text-align: center;
padding-top:110px;
margin-left:56px;
flex-shrink: 0;
order:1;
z-index:1;

}
.selectboxText01{
background-color: #fff;
width:563px;
height: 174px;
margin-top:43px;
margin-left: -93.5px;
order:2;
border:solid 1px #39a26d;
margin-right:24px;
flex-shrink: 0;
z-index:2;

}