Html 在另一个 div 之上显示一个 div

Displaying one div on top of another

提问by Villager

I have some HTML with two divs:

我有一些带有两个 div 的 HTML：

<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 #curtainto 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#curtain出现在 div 的顶部#backdrop。两个 div 的大小相同，但是我不确定如何将第二个 div 放在另一个 div 之上。

回答by Unsigned

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

在每个 DIV的属性中使用 CSSposition: absolute;后跟。用你想要的任何东西替换像素值。top: 0px; left 0px;style

You can use z-index: x;to set the vertical "order" (which one is "on top"). Replace xwith 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>

回答by coreyward

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;
}

回答by zag

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

要在另一个 div 之上正确显示一个 div，我们需要使用该属性position，如下所示：

• External div: position: relative
• Internal div: position: absolute

• 外部div： position: relative
• 内部div： position: absolute

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.

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

回答by Hammad Khan

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 将您想要的移动到顶部。

回答by Sridhar

Have the style for the parent div and the child divs' set as following. It worked for my case, hope it helps you as well..

将父 div 和子 div 的样式设置如下。它适用于我的情况，希望它也能帮助你..

<div id="parentDiv">
  <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>

in your JS:

在你的 JS 中：

document.getElementById('parentDiv').style.position = 'relative';
document.getElementById('backdrop').style.position = 'absolute';
document.getElementById('curtain').style.position = 'absolute';
document.getElementById('curtain').style.zIndex= '2';//this number has to be greater than the zIndex of 'backdrop' if you are setting any

or in your CSS as in this working example:::

或在您的 CSS 中，如本工作示例中所示:::

#parentDiv{
  background: yellow;
  height: 500px;
  width: 500px;
  position: relative;
}
#backdrop{
  background: red;
  height: 300px;
  width: 300px;
  position: absolute;
}
#curtain{
  background: green;
  height: 100px;
  width: 100px;
  position: absolute;
  z-index: 2;
  margin: 100px 0px 150px 100px;
}

<div id="parentDiv"><h2>
  THIS IS PARENT DIV
  </h2>
  <div id="backdrop"><h4>
  THIS IS BACKDROP DIV
  </h4></div>
  <div id="curtain"><h6>
  THIS IS CURTAIN DIV
  </h6></div>
</div>