要素の重なりを実現したい

Question

前提・実現したいこと

前提として、overflow:hidden;はページ全体にかけて、ページ全体の右側に余計な余白ができるのを防いでいます。
今回は、.ly-box_shevronを.ly-boxから.ly-productの上に重なるように
設置することを実現したいです。

発生している問題

.ly-box_shevronが、親要素のoverflow:hidden;の影響で.ly-productの下に隠れてしまいます。
Overflowを解除すれば解決するのですが、その代わり前提でも書いた通りページ全体の右端に余白が空いて見栄えが悪くなるのでそれは避けたいです。逆にページ全体の見栄えが保たれる方法があれば、overflowを使わなくてもよいです。

該当のソースコード

<div class="ly-product wrapper">
.
.
.
</div>

<div class="ly-box wrapper">
　　<div class="ly-box_shevron ov-v">
       <svg class="bi bi-chevron-up" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z"/></svg>
　　</div>
</div>

.wrapper{
	width:100%;
	overflow:hidden;
}

.ly-product{
   padding:110px;
   background-color:#f6f6f6;
}
.
.
.

.ov-v{
	overflow:visible;
}

.ly-box{
	position:relative;
	padding:100px 0;
}

.ly-box_shevron{
	position:absolute;
	left:50%;
	top:-30px;
	transform:translate(0,-50%);
	-webkit-transform:translate(0,-50%);
	background-color:#fff;
	border-radius:50%;
	width:50px;
	height:50px;
	text-align:center;
	transform:translateY(5px);
	z-index:30;
}

.ly-box_shevron:hover,
.ly-box_shevron:focus{
	cursor:pointer;
	transition:.25s;
	transform:translateY(0);
}

.ly-box_shevron svg{
	margin-top:15px;
}

試したこと

z-indexは効かないので、親要素(.ly-box)のoverflowから外したい子要素(.ly-box_shevron)にvisible(.ov-v)をつけて試しましたが変わりなしです。
viewportの確認もしました。

よろしければどなたかご教授よろしくお願い致します。。

Answer 1

ご回答者様の方法で解決しました。
また、.ly-boxからwrapper(overflow:hidden;)を外すことでも、右側に余白ができることなく解決しました。

Answer 2

ご希望に合うかどうかわかりませんが。
サンプル

.ly-box{
    /* position:relative; 削除 */
    padding:100px 0;
}

.ly-box_shevron{
    position:absolute;
    left:50%;
    /* top:-30px; 削除 */
    transform:translate(0,-50%);
    -webkit-transform:translate(0,-50%);
    background-color:#fff;
    border-radius:50%;
    width:50px;
    height:50px;
    text-align:center;
    transform:translateY(5px);
    z-index:30;
    margin-top: -150px; /* 追加 */
}

あと、HTMLに全角スペースが含まれておりレイアウトが崩れていますので、実際のコードでもそのようになっているのでしたらお気を付けになった方がいいかと思います。

Comments

[nkira]

ご回答、ご丁寧にいただきありがとうございます。
無事解決しました！
position:absolute;は親要素にrelativeを指定しなくても使用できるのですか。よろしければコメントいただけると幸いです。。

[Lhankor_Mhy]

>position:absolute;は親要素にrelativeを指定しなくても使用できるのですか。

はい、おっしゃるとおりです。
親要素にrelativeを設定するのは、親要素を包含ブロックにするためです。不要であれば設定する必要ありません。
祖先が全てstaticである場合、ルート要素が包含ブロックになります。
https://developer.mozilla.org/ja/docs/Web/CSS/Containing_block#Identifying_the_containing_block

[nkira]

お返事が遅れてしまい申し訳ありません。。
ご回答いただきありがとうございます！

とてもわかりやすいです！今後positionを使う際の参考にします。
この度は本当に、ありがとうございました。