css - html - 相对于 div 的位置

Question

我有一个问题：有 3 个 div。其中 2 个应该有自己的背景图像，并且它们的位置在用户区域的两侧。（一个在右边，一个在左边）。第三个 div 应该在它们之上并且是全角的。我怎么能用css做到这一点？

Answer 1

使这两个 div 或第三个 div 绝对定位。将 z-index 分配给比其他两个高的第三个 div。

（好吧，关于 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>