在另一个div上显示一个div

I have some HTML with two divs:

我有一些HTML和两个divs:

<div>
  <div id="backdrop"><img alt="" src='/backdrop.png' /></div>
  <div id="curtain" style="background-image:url(/curtain.png);background-position:100px 200px; height:250px; width:500px;">&nbsp;</div>
</div>

I want the second div #curtain to appear on top of the div #backdrop. The two divs are the same size, however I'm not sure how to position the second div on top of the other.

我希望第二个div #幕出现在div #背景之上。两个div的大小相同，但是我不确定如何将第二个div放在另一个div上。

4 个解决方案

#1

Use CSS position: absolute; followed by top: 0px; left 0px; in the style attribute of each DIV. Replace the pixel values with whatever you want.

使用CSS:绝对;其次是:0 px;离开0 px;在每个DIV的style属性中。将像素值替换为您想要的任何值。

You can use z-index: x; to set the vertical "order" (which one is "on top"). Replace x with a number, higher numbers are on top of lower numbers.

可以用z-index: x;设置垂直的“顺序”(在顶部)。用数字代替x，数字越大，数字越低。

Here is how your new code would look:

你的新代码是这样的:

<div>
  <div id="backdrop" style="z-index: 1; position: absolute; top: 0px; left: 0px;"><img alt="" src='/backdrop.png' /></div>
  <div id="curtain" style="z-index: 2; position: absolute; top: 0px; left: 0px; background-image:url(/curtain.png);background-position:100px 200px; height:250px; width:500px;">&nbsp;</div>
</div>

#2

There are many ways to do it, but this is pretty simple and avoids issues with disrupting inline content positioning. You might need to adjust for margins/padding, too.

有很多方法可以做到这一点，但这非常简单，避免了中断内联内容定位的问题。您可能也需要调整空白/填充。

#backdrop, #curtain {
  height: 100px;
  width: 200px;
}

#curtain {
  position: relative;
  top: -100px;
}

#3

To properly display one div on top of another, we need to use the property position as follows:

为了正确地显示一个div，我们需要使用属性的位置如下:

External div: position: relative
外部div:位置:相对的
Internal div: position: absolute
内部div:位置:绝对的

I found a good example here:

我在这里找到了一个很好的例子:

.dvContainer {
  position: relative;
  display: inline-block;
  width: 300px;
  height: 200px;
  background-color: #ccc;
}

.dvInsideTL {
  position: absolute;
  left: 0;
  top: 0;
  width: 150px;
  height: 100px;
  background-color: #ff751a;
  opacity: 0.5;
}

<div class="dvContainer">
  <table style="width:100%;height:100%;">
    <tr>
      <td style="width:50%;text-align:center">Top Left</td>
      <td style="width:50%;text-align:center">Top Right</td>
    </tr>
    <tr>
      <td style="width:50%;text-align:center">Bottom Left</td>
      <td style="width:50%;text-align:center">Bottom Right</td>
    </tr>
  </table>
  <div class="dvInsideTL">
  </div>
</div>

I hope this helps,
Zag.

我希望这能有所帮助，扎格。

#4

Here is the jsFiddle

这是jsFiddle

#backdrop{border:2px solid red;
width:400px;
    height:200px;
    position:absolute;
}

#curtain {
  border:1px solid blue;
  width:400px;
   height:200px;
    position:absolute;
}

Use Z-index to move the one you want on top.

使用Z-index移动你想要的那个。

#1