ここから本文です

ページ全体を中央寄せしているのにロゴだけ左に寄ったまま動きません。 web制作初...

ris********さん

2018/9/1513:57:43

ページ全体を中央寄せしているのにロゴだけ左に寄ったまま動きません。
web制作初心者です。。

positionで位置を指定したからなのかと思いましたが、他の写真やフッターにあるロゴもpositionで指定していますがちゃんと中央に収まるように動きました。
ヘッダーのロゴだけ左にくっついて動きません。なぜでしょうか??


<body>
<div class="wrap">


<header class="head">
<img class="green" src="green.png" alt="">
<img class="logo" src="logo.png" alt="">
</header>

<main>
<section class="top">
<img class="orange" src="orange.png" alt="">
</section>
</main>


</div>
</body>
————————————————
body{
width: 100%;
text-align:center;
}
.wrap{
width: 1000px;
margin: 0 auto;
text-align:left;
}
.head{
height:150px;
}
.green{
position: relative;
z-index: 0;
}
.logo{
z-index: 1;
position: absolute;
top: 30px;
left: 30px;
}

補足head に position:relative をつけたら解決しました。

が、それがなぜなのか理解できません。

img class,body&amp;gt,main&amp;gt,orange.png&amp;quot,green.png&amp;quot,position,祖先要素

閲覧数:
37
回答数:
2
お礼:
50枚

違反報告

ベストアンサーに選ばれた回答

プロフィール画像

カテゴリマスター

mar********さん

2018/9/1614:21:34

▼何故 head に position:relative をつけたら解決したのか?

position: absolute; の原点は次の様に決定されるからです。
1.直近の祖先要素のうち、position がstatic以外に設定されたもの
2.上記に該当するものが無ければルート要素(要するにページ左上)

最初は2だったのが1になったので解決した訳です。

質問した人からのコメント

2018/9/20 20:53:09

ありがとうございます( ; ; )

ベストアンサー以外の回答

1〜1件/1件中

yus********さん

2018/9/1520:38:57

>positionで位置を指定したからなのかと思いましたが
⇒そのとおりです

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる