css 重ね順

Question

いつもお世話になっております。

htmlとcssを使いサイトを制作しています。

下記画像のような見出し付き吹き出しをcssで作成しようとしたのですが、

私が制作したものは下記画像の物ができました。

見出しを一番前の方に持ってきたいのですが、ずっと後ろで隠れたままです、

重なりの順序を指定するz-index を使ってみたのですがずっと後ろに隠れたままでした。

.chara01 {
	width: 40%;
	margin-top:100px;
	margin-left:15%; 
	padding:13px 5px; 
	background:#FF1493; color:#ffffff; 
	font-weight:bold;
	border-radius: 50px;
	z-index:1; 
}

.arrow_box {
	width:60%;
	height:150px;
	margin-top:-20px;
	position: relative;
	background: #ffffff;
	border: 4px solid #FF1493;;
	border-radius: 30px;
	z-index:2; 
}

どこか足りない物がありますでしょうか。ご教授お願い致します。

Comments

[kei344]

状況が再現しません。⇒ https://jsfiddle.net/7ztdgnmn/

[syosinsyapurogu]

kei344さん　
私のhtmlはこんな感じです！
kei344

[syosinsyapurogu]

<div class="chara01">
お手本
</div>

<div class="arrow_box">
sss
</div>

Answer 1

.chara01 へ position: relative; を追加した場合、どうなりますか？

それでも解決しない場合、より詳細なHTMLの提示をお願いします。

Comments

[syosinsyapurogu]

早速のご回答ありがとうございます。
最初position: relative; を両方のクラスに入れていてうまくいかなかったので、
position: relative; を入れても意味がないと思っていたのですが、
片方.chara01だけに入れたら無事重ね順が指定できました！ありがとうございました。

Answer 2

下記を参考にしてみてはどうでしょう。
CSS再入門

Comments

[syosinsyapurogu]

archiverさん
ご回答ありがとうございます！
とても分かりやすいサイトですね！活用させていただきます！