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

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

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

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

CSS

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

解決済

Z-indexが効かない

pontyan
pontyan

総合スコア0

HTML

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

CSS

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

2回答

0評価

0クリップ

26閲覧

投稿2020/07/26 03:30

⚫︎前提・実現したいこと
Bootstrapを使いサイト模写をしているのですが、赤丸の部分が空白になり重なりません。
2枚目写真は見本です。お手数ですが、ご教授願います。

⚫︎発生している問題
![イメージ説明

見本
イメージ説明

⚫︎試したこと
親要素にrelative、子要素にabsolute、またz-indexの調整など色々試しましたが、うまくいきません。
以下の記事も参考にしましたが、解決できませんでした。
https://coliss.com/articles/build-websites/operation/css/4-reasons-z-index-isnt-working.html

⚫︎補足情報(FW/ツールのバージョンなど)
サイト表示はChromeで、コーディングはVScodeを使用しています。
MacOSです。

⚫︎該当のソースコード
HTML

<!-- XeoryExtensionの特徴------------------------------ --> <div class="feature"> <div class="flex"> <div class="icon"> <i class="fas fa-check pb-2"></i> </div> <h2 class="font-weight-normal text-white text-center"> XeoryExtensionの特徴 </h2> <p class="text-white text-center">feature</p> <div class="f-border"> <span></span> </div> </div> <!-- XeoryExtensionの特徴 コンテンツ------------------------------ --> <div class="d-flex flex-wrap-reverse justify-content-center"> <div class="col-md-7 col-12 p-0 align-self-center h3 px-4"> <div class="f-number">1</div> <h1 class="mobile">モバイルレスポンシブ</h1> <p class="m-english">Mobile Responsive</p> <p> Xeory Extensionはレスポンシブデザインを採用しています。スマートフォンやタブレットなど各種デバイスで表示が最適化されます。 </p> <div class="btn-f"> <a href class="btn-simple">詳しく見る</a> </div> </div> <div class="col-md-5 col-12 p-0 align-self-center"> <img class="img-fluid" src="img/macbook-at-the-coffee-shop.jpg" alt="" /> </div> </div> </div>

CSS

/* <!-- XeoryExtensionの特徴------------------------------ --> */ .feature { position: relative; } .flex { background: #3b4552; } .fa-check { display: flex; align-items: center; justify-content: center; padding-top: 20px; color: #fff; } .flex p { font-size: 13px; } .f-border { position: absolute; bottom: -18px; width: 100%; z-index: 10; margin: 0; } .f-border span { display: block; margin: 0 auto; width: 0; height: 0; border-left: 56px solid transparent; border-right: 56px solid transparent; border-top: 18px solid #3b4552; } /* <!-- XeoryExtensionの特徴 コンテンツ------------------------------ --> */ .d-flex { position: absolute; left: 0; top: 125; z-index: 20; } .f-number { width: 34px; height: 73px; font-size: 16px; vertical-align: bottom; color: #fff; background: #47b39d; padding: 40px 12px 8px 12px; } .mobile, .m-english { color: #47b39d; } .m-english { font-size: 10px; } .col-md-7 p { font-size: 17px; } .btn-simple { display: inline-block; margin-top: 25px; padding: 12px 40px; text-decoration: none; font-size: 14px; color: #fff; transition: all ease-in-out 0.3s; background: #ff6c00; border-radius: 5px; text-shadow: 0 0 3px rgba(0, 0, 0, 0.5); } .btn-simple:hover { opacity: 0.8; } .col-md-4 img { max-width: 100%; max-height: 100%;

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

HTML

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

CSS

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