<div id="gNavi"> <ul> <li><a href="#" class="bottomitems">病院紹介</a></li> <li><a href="#" class="bottomitems">ご利用案内</a></li> <li><a href="#" class="bottomitems">診療科紹介</a></li> <li><a href="#" class="bottomitems">専門医療</a></li> <li><a href="#" class="bottomitems">地域医療連携</a></li> <li><a href="#" class="bottomitems">採用情報</a></li> </ul> </div> #gNavi{ overflow:hidden; width:100%; height:60px; text-align:center; box-sizing:border-box; border-top:3px solid #8EA2E3; background:linear-gradient(to bottom,#fff 20%,#EBEBEB 100%); position:relative; } #gNavi ul{ position:absolute; left:50%; transform:translateX(-50%); width:1200px; } #gNavi ul li:nth-child(1){ border-left:1px solid #fff; } #gNavi ul li{ float:left; width:200px; height:60px; box-sizing:border-box; border-top:3px solid #03C; border-right:1px solid #fff; background:linear-gradient(to bottom,#fff 20%,#EBEBEB 100%); } ```### 前提・実現したいこと 親要素の上に子要素を表示させたい。 ### 発生している問題・エラーメッセージ 親要素、子要素共にborder-top:3px solid #000;を指定しています。 親要素の上に子要素を重ねたいのですが、どうしても親要素のborderのしたに子要素がきてしまいます。 イメージとしては親要素と子要素のborderが平行になるようにしたのですが、親要素のborderの下に子要素が表示されるためborderが凹のようになってしまいます。 ### 該当のソースコード HTML css ### 試したこと 1.borderの高さ(3px)分、子要素をpositionでtop:-3px;と設定したが親要素の下に隠れてしまった。 2.親要素のz-index:1;、子要素のz-index:10;など子要素の値を親要素より大きくしたが結果は下に隠れてしまった。 ### 補足情報(FW/ツールのバージョンなど) ここにより詳細な情報を記載してください。
回答2件
あなたの回答
tips
プレビュー