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

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

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

XHTMLは、eXtensible HyperText Markup Languageの略であり、SGMLベースであるHTMLとは違って、有効なXMLドキュメントにもなるHTMLアプリケーションです。XMLベースのツールを用いて生成されるHTMLページのためによく使われるマークアップ言語です。

CSS

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

Q&A

解決済

1回答

369閲覧

タイトルバーを最初に開いた時から、画像に重ねて表示させたい

ott0000

総合スコア21

XHTML

XHTMLは、eXtensible HyperText Markup Languageの略であり、SGMLベースであるHTMLとは違って、有効なXMLドキュメントにもなるHTMLアプリケーションです。XMLベースのツールを用いて生成されるHTMLページのためによく使われるマークアップ言語です。

CSS

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

0グッド

0クリップ

投稿2022/09/22 06:45

前提

議事ホームページを作っています。
CSSについて質問させてください。

実現したいこと

上に固定したタイトルバーを、ページ開いた時から
画像に重ねておきたい。

該当のソースコード

HTML

1<div class="main"> 2 <div class="header_background"> 3 <div class="header"> 4 <div class="logo"> 5 <img src="./image/logo_green.png"> 6 </div> 7 <div class="menu"> 8 <ul> 9 <li>News</li> 10 <li>About</li> 11 <li>Services</li> 12 <li>Recruit</li> 13 <li>Contact</li> 14 </ul> 15 </div> 16 </div> 17 </div> 18 19 <div class="img-wrap_content"> 20 <div class="img-wrap"> 21 <img src="image/IMG_0258-1.jpeg"> 22 <img src="image/IMG_0256.jpeg"> 23 <img src="image/IMG_0242-1.jpeg"> 24 <img src="image/IMG_0224-1.jpeg"> 25 <img src="image/IMG_0218-4.jpeg"> 26 </div> 27 <div class="bottom-left">世の中の課題をITで解決し、<span class="font_test">関わった世界中の人たちを幸せにする</span></div> 28 29 </div> 30</div>

CSS

1body { 2 background-color: #eaeaea; 3 margin: auto; 4 width: 100%; 5 padding: 0px; 6} 7 8.main {} 9 10.header_background { 11 position: sticky; 12 position: -webkit-sticky; 13 top: 0; 14 15 padding-top: 40px; 16 padding-bottom: 40px; 17 background-color: white; 18 background: rgba(255, 255, 255, 0.8); 19 background-size: cover; 20 z-index: 100; 21 /*重なり調整*/ 22 23} 24 25.header { 26 margin: auto; 27 max-width: 1200px; 28 display: flex; 29 align-items: center; 30} 31 32.menu { 33 margin-left: auto; 34} 35 36.menu ul { 37 display: flex; 38 gap: 40px; 39} 40 41.img-wrap_content { 42 position: relative; 43 margin-bottom: 100px; 44} 45 46.img-wrap { 47 width: 100%; 48 height: 800px; 49 position: relative; 50 z-index: -1; 51} 52 53.bottom-left { 54 position: absolute; 55 bottom: 25px; 56 left: 25px; 57 58 font-size: 30px; 59 font-weight: 600; 60 color: white; 61} 62 63.font_test { 64 color: yellow; 65} 66 67.img-wrap img { 68 width: 100%; 69 height: 800px; 70 position: absolute; 71 72 /*重なり調整*/ 73

試したこと

z-indexで重ねることができるのはわかりましたが、
ページを開いた時から重ねる方法がわかりませんでした。
heightをなくせばいいのかと思い試しましたが、
背景がなくなってしまうので駄目でした。イメージ説明

最初に開いた状態から、固定した白いバーを下の画像のように表示したい↓

イメージ説明

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

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

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

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

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

m.ts10806

2022/09/22 06:49

質問タグにXHTMLをつけられていますが、質問本文から関連性が見えません。 https://teratail.com/tags/XHTML なるべくコード全て提示してください。
ott0000

2022/09/22 08:37

失礼しました。こちらはHTMLです。
ott0000

2022/09/22 08:38

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>株式会社 LiNew</title> <link rel="stylesheet" type="text/css" href="base.css"> <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet"> <meta name="viewport" content="width=device-width,initial-scale=1"> </head> <body> <div class="main"> <div class="header_background"> <div class="header"> <div class="logo"> <img src="./image/logo_green.png"> </div> <div class="menu"> <ul> <li>News</li> <li>About</li> <li>Services</li> <li>Recruit</li> <li>Contact</li> </ul> </div> </div> </div> <div class="img-wrap_content"> <div class="img-wrap"> <img src="image/IMG_0258-1.jpeg"> <img src="image/IMG_0256.jpeg"> <img src="image/IMG_0242-1.jpeg"> <img src="image/IMG_0224-1.jpeg"> <img src="image/IMG_0218-4.jpeg"> </div> <div class="bottom-left">世の中の課題をITで解決し、<span class="font_test">関わった世界中の人たちを幸せにする</span></div> </div> </div>
m.ts10806

2022/09/22 08:49

質問は編集できますので適宜ご対応願います。 ※こちらはあくまで質問への追記修正依頼のコメント欄です。
guest

回答1

0

ベストアンサー

sticky をやめて、fixed にすれば重なります。

css

1.header_background { 2 position: fixed; 3 width: 100%; 4 top: 0; 5 6/* 以下略 */

`sticky‘ でないとだめということなら、ネガティブマージンで重ねることになるかな。

css

1.header_background { 2 position: sticky; 3 position: -webkit-sticky; 4 top: 0; 5 margin-bottom: -180px; /* ヘッダーの高さ分マイナス */ 6 7/* 以下略 */

投稿2022/09/22 09:23

hatena19

総合スコア33620

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

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

ott0000

2022/09/22 09:29

ありがとうございます! position: fixed;を使い解決しました! positionについてもう一度勉強しなおします。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問