teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

4

コードの修正

2018/08/01 15:34

投稿

takopo
takopo

スコア484

answer CHANGED
@@ -2,7 +2,7 @@
2
2
  ```html
3
3
  <header id="header">
4
4
  <div class="header-img"><img src="images/mainImg.jpg" alt=""></div>
5
- </div>
5
+ </header>
6
6
  ```
7
7
  ```css
8
8
  #header{

3

文章の微調整

2018/08/01 15:34

投稿

takopo
takopo

スコア484

answer CHANGED
@@ -1,4 +1,4 @@
1
- 現物を見ていないので何とも言えないのですが、header img に対して position:absolute を指定しているのが原因ではないでしょうか。この場合imgに直接絶対配置が適用されてしまいますので、以下のようにimgを<div>か何かのタグで囲って、それに対して position:absolute を指定します。
1
+ 現物を見ていないので何とも言えないのですが、headerの中のimg要素に対して position:absolute を指定しているのが原因ではないでしょうか。この場合img要素に直接絶対配置が適用されてしまいますので、以下のようにimg要素を<div>か何かのタグで囲って、それに対して position:absolute を指定します。
2
2
  ```html
3
3
  <header id="header">
4
4
  <div class="header-img"><img src="images/mainImg.jpg" alt=""></div>

2

コードの微調整

2018/08/01 15:32

投稿

takopo
takopo

スコア484

answer CHANGED
@@ -5,6 +5,10 @@
5
5
  </div>
6
6
  ```
7
7
  ```css
8
+ #header{
9
+ position: relative;
10
+ }
11
+
8
12
  .header-img {
9
13
  position: absolute;
10
14
  }

1

コードの微調整

2018/08/01 15:31

投稿

takopo
takopo

スコア484

answer CHANGED
@@ -1,6 +1,8 @@
1
1
  現物を見ていないので何とも言えないのですが、header img に対して position:absolute を指定しているのが原因ではないでしょうか。この場合imgに直接絶対配置が適用されてしまいますので、以下のようにimgを<div>か何かのタグで囲って、それに対して position:absolute を指定します。
2
2
  ```html
3
+ <header id="header">
3
- <div class="header-img"><img src="images/mainImg.jpg" alt=""></div>
4
+ <div class="header-img"><img src="images/mainImg.jpg" alt=""></div>
5
+ </div>
4
6
  ```
5
7
  ```css
6
8
  .header-img {