質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

1793閲覧

親要素のborderが子要素の上に表示されてしまう。

hiroki88

総合スコア66

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2019/02/01 08:27

編集2019/02/02 03:50
<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/ツールのバージョンなど) ここにより詳細な情報を記載してください。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

x_x

2019/02/01 08:45

親要素、子要素というのは具体的にどれのことでしょうか?
y_waiwai

2019/02/01 08:55

このままではコードが見づらいので、質門を編集し、<code>ボタンで、出てくる’’’の枠の中にコードを貼り付けてください
hiroki88

2019/02/02 03:46

X_X様 親要素は#gNavi子要素はliになります。
hiroki88

2019/02/02 03:51

y_waiwai様 CODEを貼り付けなおしました。 初心者なため使い方がわかっておらず申し訳ありません。
kei344

2019/02/02 17:46

まだ質問が「受付中」になっていますが、「ベストアンサー」を選び「解決済」にされてはいかがでしょうか。
guest

回答2

0

ベストアンサー

CSS #gNaviのoverflow:hidden;を削除した上で、#gNavi ul liにmargin-top:-3px;を付け足すというのはどうでしょう。

投稿2019/02/01 12:32

cerfweb

総合スコア1899

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hiroki88

2019/02/02 03:44

回答していただきありがとうございます。 行ってみたところ親要素のborderの上に子要素が来ることができました。 子要素にfloatをかけていたので親要素にoverflowをかけていました。 まだ初心者なためお聞きしたいのですが、なぜoverflowを削除したら上手く重なったのでしょうか? よろしければご教授ください。
cerfweb

2019/02/02 08:49

overflowはborderの内側の範囲からはみ出る要素に対してどうするかということのようです。 親要素のborderの上に子要素のborderを重ねるにはoverflow:hiddenでは無理ということになりますね。
s8_chu

2019/02/02 10:05 編集

横から失礼します。 > 子要素にfloatをかけていたので親要素にoverflowをかけていました。 `float`プロパティを適用した要素の祖先要素の高さが 0 になってしまわないように、`#gNavi`に対して`overflow`プロパティを適用しているのだと思いますが、今回は`overflow`プロパティを適用する必要がありません。 なぜならば、質問文のコードでは既に、絶対位置指定された`ul`要素によって、`overflow`プロパティに`hidden`を指定したときと同様の効果が得られているためです。 参考: https://www.w3.org/TR/CSS2/visuren.html#normal-flow
hiroki88

2019/02/02 17:18

cerfweb様、s8_chu様 ご丁寧にご教授いただきありがとうございました。 教えていただいた事を今後に生かさせていただきます。
guest

0

ulのマージンやパディングをリセットして、border分をtop指定してみてください。

CSS

1#gNavi ul { 2 position:absolute; 3 left:50%; 4 transform:translateX(-50%); 5 width:1200px; 6 margin: 0; /* ← 追加 */ 7 padding: 0; /* ← 追加 */ 8 top: -3px; /* ← 追加 */ 9}

投稿2019/02/02 04:06

yoshinavi

総合スコア3521

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

s8_chu

2019/02/02 07:08 編集

この回答文のコードのように修正しただけでは、質問者さんの実現したいことは行えないと思います。
yoshinavi

2019/02/02 07:14

s8_chu 様 親要素と子要素のボーダー位置を揃えたい、のが質問者さんの実現したい事ではないのでしょうか?
s8_chu

2019/02/02 07:22

「前提・実現したいこと」には、「親要素の上に子要素を表示させたい。」と書かれています。 また、「試したこと」に書かれていることからも、子要素のボーダーを親要素のボーダーの上に重ねようとしていることがわかります。 そのため、位置を揃えるだけではなく、子要素のボーダーが親要素のボーダーの上に、重なっていなければならないと思います。
yoshinavi

2019/02/02 07:45

位置を揃える=子要素のボーダーが、親要素のボーダーの上に重なっている状態ですよね。 そのようになっていませんか?
yoshinavi

2019/02/02 07:48

今はPCの前にいませんので、のちほど、スクショを添付致します。
hiroki88

2019/02/02 08:03

CSSリセットは行っているのですが、個別にも上記のようにmargin.paddingを0に設定しないとだめなのでしょうか?
yoshinavi

2019/02/02 08:09

提示のコードでは、リセットはないので、余分なスペースが発生していますので、掛けて回答しています。 通常は、個別に掛ける必要はありません。
s8_chu

2019/02/02 09:42 編集

yoshinavi さん> > そのようになっていませんか? Windows10 で、 Google Chrome, Firefox, Opera を使い検証をしましたが、そのような動作になっていませんでした。いずれのブラウザでも、親要素のボーダーが前面に表示され、子要素のボーダーは隠されています。 検証用コード: https://codepen.io/anon/pen/zewZem ※ 検証用コードでは、子要素のボーダーの色を赤、親要素のボーダーの色を黒にしています。 また、 CSS Overflow Module Level 3 によれば、`overflow`プロパティに`hidden`を指定したとき、 ボックスの内容はパディングボックスで切り取られます。そのため、現状のコードでは、子要素のボーダーは、`overflow`プロパティにより切り取られ、表示されないと思います。 > This value indicates that the box’s content is clipped to its padding box https://www.w3.org/TR/css-overflow-3/#valdef-overflow-hidden
yoshinavi

2019/02/02 12:55

s8_chu 様 遅くなってスミマセン。 先程、確認致しました。 確かにご指摘のとおり、私の回答は質問者さんの希望に沿ったものではなかったです。 ボーダーの重なり位置のみ考慮して、「overflow:hidden;」を考慮しておりませんでした。 ※overflow:hidden;を削除する必要がありました。 回答の際は、細部まで確認した上で、回答するように気を付けていきます。 的確なご指摘ありがとうございます。 質問者 様 不適切な回答で申し訳ございません。 m( _ _ ;)m 私の回答コードには、「overflow:hidden;」を削除する必要がありました。
hiroki88

2019/02/02 17:19

yoshinavi様 分かりずらい質問内容で申し訳ありませんでした。 ご丁寧に何度もお答えいただきありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問