【CSS】1ページに複数箇所で要素と画像を被せるデザイン

これはかなり苦労した。。

目標物:こんなページを作成する

ポイントは3点

  1. positionのrelativeとabsoluteを駆使して要素と画像を被せる
  2. 1が1ページに複数箇所ある場合、relativeが効かなくなる
  3. 画像に対する要素位置の指定

    <div class="problem_area">
      <div class="problem_image">
        <%= image_tag 'problem_image.jpg', size: '525x345', alt: 'problem' %>
      </div>
      <div class="problem_content">
        <h4>Problem</h4>
        <p>
        あなたの周りに仕事を楽しんでいる人はどれくらいいますか?<br>
        世界全体で見たときに日本の仕事の生産性はどの位置にありますか?<br>
        なぜこんなにも仕事を楽しめず、生産性も低いのか?<br>
        こんな問題を解決します!
        </p>
      </div>
    </div>

    <div class="why_area">
      <div class="why_image">
        <%= image_tag 'why_image.jpg', size: '525x345', alt: 'why' %>
      </div>
      <div class="why_content"> 
        <h4>why</h4>
        <p>
        生産性をあげられれば...<br>
        ・雑務を減らし、付加価値の高い仕事に専念できる<br>
        ・労働時間が減りプライベートの時間が増える<br>
        ・収入UP<br>
        日々の生活が楽しく幸せに!
        </p>
      </div>
    </div>

.problem_area{
  position: relative;
  height: 345px;
}

.problem_image {
  display:block;
  float: right;
}

.problem_content {
  position: absolute;
  margin: 100px 30px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.829);
}

.why_area {
  position: relative;
  height: 345px;
}

.why_image {
  display:block;
  float: left;
}

.why_content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(10%);
  padding: 10px;
  background: rgba(255, 255, 255, 0.829);
}

  • positionのrelativeとabsoluteを駆使して要素と画像を被せる
  • 親要素にposition: relativeを、子要素にposition: absoluteを指定する。

    これで要素を被せることができる。

  • 上記が1ページに複数箇所ある場合、relativeが効かなくなる
  • relativeが複数ある場合は、先祖(一番の元)をrelative基準としてしまう。

    そこでポイントとなるのが、position: relativeの後に書いてあるheight

    height指定により、relative基準をそこからにできる。説明が難しい。。。

    1つのページ内に position: relative; と position: absolute; を複数入れるが親要素と子要素の関係がうまくいかない
    表題の件、 各ブロックごとに contents-1 / contents-2 を親要素、 その中身の div を子要素として、position: relative; / position: abs

    こちらを参考

  • 画像に対する要素位置の指定
  • area内でのcontent要素の位置の指定方法としてtransformを使用している。

    CSSで要素を上下や左右から中央寄せする7つの方法
    こんにちは。めぐたんです。みなさんは「CSSで中央寄せする方法」といえば何が思いつくでしょうか?...

    こちらがすごく参考になった!

    コメント