前提
議事ホームページを作っています。
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をなくせばいいのかと思い試しましたが、
背景がなくなってしまうので駄目でした。
最初に開いた状態から、固定した白いバーを下の画像のように表示したい↓
質問タグにXHTMLをつけられていますが、質問本文から関連性が見えません。
https://teratail.com/tags/XHTML
なるべくコード全て提示してください。
失礼しました。こちらはHTMLです。
<!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>
質問は編集できますので適宜ご対応願います。
※こちらはあくまで質問への追記修正依頼のコメント欄です。
回答1件
あなたの回答
tips
プレビュー