Question

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

Answer 1

使这两个div或第三个div绝对定位。将z-index分配给第三个div高于其他两个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>

html - 将位置划分为相对位置

1 个答案: