CSS - 覆盖Divs

Question

我确信这是一个常见的问题，但我似乎找不到直接的Q-A。

说我有以下结构 - 我需要实现什么CSS技巧才能让itemB覆盖在itemA上：

<div id="parent">

   <div id="itemA">
      Lorem
   </div>

   <div id="itemB">
      Ipsum
   </div>

</div>

Answer 1

您要找的是positioning。

在css中有一个名为＆＃34; position＆＃34;的属性，在这种情况下，您需要将itemB的位置设置为绝对位置。绝对意味着它将相对于父级定位（请注意，您需要设置位置：相对;对于父级，否则它将无法工作）。

然后你可以设置top | bottom | left | right：{像素数} px;按照你的意愿定位它。在这种情况下，itemA根本不会影响itemB。

Answer 2

使用此CSS在itemA上覆盖itemB。

div都标记为绝对，以便放在页面上的同一位置，并用itemB覆盖itemA div，itemB的z-index应大于itemA。

    #parent{
      width: 100px;
      height: 100px;
      position: relative;
    }
    #itemA,
    #itemB{
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
    }
    #itemB{
      z-index: 10;
    }

Answer 3

只需应用position: relative/absolute，然后使用left/right/top/bottom移动元素。

relative - 不要从正常的DOM流中获取元素，保留它的保留空间，意味着将影响该元素位置的其他元素。
absolute - 从DOM中取出元素并且不为他预留空间，意味着其他元素不会受此元素位置的影响。

使用z-index在z方向移动定位元素（向上或向下堆叠）

#itemA {
  background-color: rgba(200, 200, 250, .7);
  position: relative;
  top: 30px;
}
#itemB {
  background-color: rgba(200, 250, 200, .7);
  z-index: 6
}

<div id="parent">

  <div id="itemA">
    Lorem
  </div>

  <div id="itemB">
    Ipsum
  </div>

</div>

Answer 4

添加此样式：

#itemB{
  position:absolute;
  top:0;
  left:0;
  opacity:0.5;
}