css - html-相対的なdivの位置

Question

質問があります：3つのdivがあります。それらのうちの2つは背景画像を持っている必要があり、それらの位置はユーザー領域の2つの側面にあります。（1つは右に、もう1つは左に）。3番目のdivは、それらの上にあり、全幅である必要があります。cssでこれを行うにはどうすればよいですか？

Answer 1

これらの2つのdivまたは3番目のdivを絶対に配置します。他の2つよりも高い3番目のdivにz-indexを割り当てます。

（まあ、CSSについての話が例なしで行くことができる限り）

---

<style>
  div.holder-for-left-and-right
  {
    width: 100%;
    overflow: hidden;
    position: relative;
  }

  div.left
  {
    float: left;
    width: 100px;
    height: 50px;
    background: url(...) no-repeat;
    z-index: 1;
  }

  div.right
  {
    float: right;
    width: 100px;
    height: 50px;
    background: url(...) no-repeat;
    z-index: 1;
  }

  div.on-top-of-them
  {
    position: absolute;
    top: 0;
    width: 100%;
    height: 50px;
    z-index: 2;
  }
  </style>

<div class="holder-for-left-and-right">
  <div class="left">I am leftM</div>

  <div class="right">I am right</div>

  <div class="on-top-of-them">I am over them</div>
</div>