ブログを更新して久しぶりです。仕事を始めてから23日が経ちました。正しい軌道に乗り始めました。最近の知識と仕事は定期的に更新します。
今日は、タブバーの矢印スタイルの問題についてお話します。
nav-btnで回転する正方形のdivを追加し、次のコードを使用して達成します
.rotatebox{
height:42px;
width:43px;
position: absolute;
top: 8px;
left: 138px;
transform: rotate(45deg);
z-index: 20;
background-color: rgb(182, 182, 182);
}
.active .rotatebox{
background: rgb(66, 163, 71);
}アクティブ状態のnav-btnとz-indexを30に設定します（有効、次の図はインデックス20でnav-btnをカバーできます）
それらの中で、通常の状態のnav-btnのz-indexを20に設定し、回転のz-indexを50（アクティブの30を超える）に設定します（非アクティブ、以下に示すように非アクティブな回転はアクティブなnav-btnをカバーできません）
後で、z-indexを設定するときに、親タグの直下に設定されたnav-btn全体がアクティブなときのz-indexであることがわかりました。コードは次のとおりですが、実際には、これはnavbtnサブタグの回転のステータスに影響し、設定につながります有効になりません。
.nav-title-wrap{
display: inline-block;
margin-left: 25%;
.active{
//z-index：30
background: rgb(66, 163, 71);
}
}解決：
実際、コード全体では、通常の回転状態のZインデックスを20に設定するだけです！（アクティブかどうかにかかわらず、常に最上位レイヤーに表示されます）結果は通常どおり表示されますが、問題があります。つまり、内部のテキストを中央に表示したい場合は、小さな正方形で覆われないように、20より大きいz-indexに設定する必要があります。 ！
また、インターネット上では、矢印付きの背景画像を使用し、背景画像+マージン-左+ z-indexを使用して取得することをお勧めします。これにより、回転に関する一連の問題を回避できます。背景画像リソースがある場合は、使用することをお勧めします。リンクは次のとおりです。
https://www.jb51.net/css/546811.html
さらに、z-indexを使用する場合は、位置、絶対、相対、固定を設定する必要があることに注意してください。
z-indexは、親要素に基づいてレンダリングされる属性です。親要素が低レベルの場合、子要素が一生懸命働くのは役に立ちません。
z-indexの詳細については、https：//www.cnblogs.com/teamobaby/p/3840226.htmlを参照して ください