フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援
フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援

float指定時・header固定時に要素がかぶるときの対処法

18.12.1 課題内容

指示書を完成させる(headerをスクロールしても固定されるようにする)

キャプチャ181201.PNG

  • 与えられている雛形
sample.html
<!DOCTYPE html>
<html lang="en" class="">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="sample.css">
</head>
<body>
  <div class="wrapper">
    <header>
    </header>
    <div class="contents">
      <div class="left-content">
      </div>
      <div class="right-content">
      </div>
      <div class="bottom-content">
      </div>
    </div>
    <footer>
    </footer>
  </div>
</body>
</html>
sample.css
html, body{
  height: 100%;
  margin: 0;
  padding: 0;
}
.wrapper{
  height: 100%;
}
header{
  background-color: #333;
  height: 70px;
}
.contents{
  width: 960px;
  background-color: #eee;
  margin: 0 auto;
}
.left-content{
  background-color: red;
  width: 700px;
  height: 400px;
}
.right-content{
  background-color: yellow;
  width: 260px;
  height: 300px;
}
.bottom-content{
  background-color: green;
  height: 250px;
}
footer{
  height: 60px;
  background-color: #333;
}

1.body部分の黄を赤の左に配置したい!

まず、以下のようにcssを指定すると

sample.css
.left-content /*赤*/{
  background-color: red;
  width: 700px;
  height: 400px;
  float:left; /*左寄せにしたいので*/
}
.right-content /*黄*/{
  background-color: yellow;
  width: 260px;
  height: 300px;
}
.bottom-content/*緑*/{
  background-color: green;
  height: 250px;
  clear:both; /*左寄せを解除*/
}

.right-content(黄)が消えました・・・正しくは赤の下に潜り込んでいました
キャプチャ181201_2.PNG

この問題を解決するには
.right-contentにもfloat:left;をかける

sample.css
.left-content /*赤*/{
  background-color: red;
  width: 700px;
  height: 400px;
  float:left; /*左寄せにしたいので*/
}
.right-content /*黄*/{
  background-color: yellow;
  width: 260px;
  height: 300px;
  float:left;/*追加部分*/
}
.bottom-content/*緑*/{
  background-color: green;
  height: 250px;
  clear:both; /*左寄せを解除*/
}

できました!!
キャプチャ181201_3.PNG

2.headerを固定する

固定するために下記のコードを追記しました

sample.css
header{
  background-color: #333;
    width:100%;
  height: 70px;
/*以下3行追記部分*/
  position:fixed;
  top:0;
  z-index:100;
}

するとbodyの上部分がheaderと重なってしまいました(headerの高さ分ずれてしまっています)
キャプチャ181201_4.PNG

headerの高さ(70px)分padding-topでずらすとうまくいきました

sample.css
.contents{
  width: 960px;
  background-color: #eee;
  margin:0 auto;
  padding-top: 70px;/*追記部分*/
}
[紹介元] CSSタグが付けられた新着記事 – Qiita float指定時・header固定時に要素がかぶるときの対処法

コメント

記事に戻る

コメントを残す