Q&A
問題の解決につながらないと思いますので、低評価します。
このコードで解決をするには、HTMLも変更しないといけないはずです。
main pictureのimgの上に、pタグの中国の小さな小さな田舎町〜を乗せたいのですが、画像の下に文章が表示されてしまい乗っかりません。
起点は、画像の左上からtopやleftを指示したいと思っております。
下記がhtmlのコード。
<!DOCKTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>thread</title> <link rel="stylesheet" href="stylesheet.css"> </head> <body> <header> <div class="header-logo"> <heading class="thread"><a href="index.html"><img src="threadlogo.jpg" alt="threadのロゴ"></a> </div> </header> <div class="container"> <div class="side-menu"> <ul class="contents"> <li class="link"><a href="company profile.html">company profile</a></li> <li class="link"><a href="map.html">map</a></li> <li class="link"><a href="machine.html">machine</a></li> <li class="link"><a href="mailto:23@gmail.com"target="_blank">Contact</a></li> </ul> </div> <div class="main-picture"> <img src="top.jpg" alt="編み機のお兄さん"> <p>中国の小さな小さな田舎町<br>蘇州</p> </div> </div> </body>下記がcssのコードです。
.header-logo img {
width: 100px;
height: auto;
margin: 50px;
}
.contents {
float: left;
}
.main-picture {
position: relative;
}
.main-picture p {
position: absolute;
color: black;
font-size: 60px;
font-family: ヒラギノ明朝 Pro;
font-weight: light;
}
.main-picture img {
width: 1170px;
height: auto;
margin: 30px;
}
.link {
list-style: none;
color: #808080;
}
a {
text-decoration: none;
color: black;
}
a.hover {
opacity: .5;
}
よろしくお願いいたします。
回答2件
0
こんにちは。
以下を追加するとどうなりますか？
css
1.main-picture img { 2position:absolute; 3}
絶対配置にした要素はフローから外れ、後続の要素からその要素がなかったものとして配置、つまり上から配置されます。
ですので、重ねたい要素を絶対配置するのではなくて重ねられたい要素をHTMLの先において絶対配置をするのが手っ取り早いです。
または、-millmill-さんのご回答のように、z-indexを設定するならば、HTMLの出現順を重ね合わせ順と変えることもできます。
投稿2020/10/11 06:33
総合スコア36113
0
css
1.main-picture { 2z-index: -1; /* 追加 */ 3} 4.main-picture p { 5z-index: 1; /* 追加 */ 6}
positionを使った要素の重なり順は z-index で指定できます。
親要素を -1 で最下層にし
p要素を 1 にして上に重なるようにすればOKです^^
投稿2020/10/10 11:38
総合スコア674
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/10/12 06:10
2020/10/12 06:23