在另一个 div 上方显示一个 div

Question

我有一些包含两个

的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>

我希望第二个

元素#curtain出现在

元素#backdrop的上面。这两个

元素的大小相同，但我不确定如何定位第二个

元素在另一个

元素的上方。

- Villager

---

你好，尝试使用样式float:left; ;) - Ali Ben Messaoud

Answer 1

在每个DIV的style属性中使用CSS position: absolute;，然后跟随top: 0px; left 0px;。将像素值替换为您想要的任何值。

您可以使用z-index: x;来设置垂直“顺序”（哪一个“在上面”）。将x替换为数字，数字越高，位于较低数字之上。

这是您的新代码的样子：

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

- Unsigned

---

有没有不用绝对定位的方法啊？！我必须在一个较大的页面中覆盖一个组件..为什么不能在一个页面中从xy到xy进行覆盖呢？！为什么这么复杂啊哈哈。 - ScipioAfricanus

Answer 2

有很多方法可以做到这一点，但这种方法相当简单，避免了破坏内联内容定位的问题。您可能还需要调整边距/填充。

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

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

- coreyward

---

+1，由于您没有使用“绝对”保持位置非常好，谢谢。 - Francisco Corrales Morales

但是这种方法并不太灵敏。如果您缩放或调整屏幕大小，项目可能会偏离位置。 - Newteq Developer

@Sanity1123这是因为这个答案是在响应式网页设计流行之前发布的。 - coreyward

Answer 3

为了正确地将一个div显示在另一个div的顶部，我们需要使用以下属性：position：

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

我在这里找到了一个很好的例子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>

希望这能帮到你，
Zag。

- zag

Answer 4

使用 CSS 的替代解决方案：grid：

.grid-container { display: grid; }
/* 'curtain' grid item is placed over the 'backdrop' grid item */
#backdrop, #curtain { grid-area: 1/1; }

/* Cosmetic things for showing the result*/
#backdrop { border: 12px solid red; }
#curtain { border: 10px solid blue; }

<div class="grid-container">
  <div id="backdrop">hello</div>
  <div id="curtain">world</div>
</div>

您可以看到带有蓝色边框的网格项放置在带有红色边框的网格项上方。 这个想法是两个网格项都被放置在相同的行=1、列=1的索引位置，div("curtain")在最后覆盖之前的div(s)（如果有的话）。

另一个例子 - 将一个div滑动到另一个div上：

let overItem = document.getElementById('overItemId');
let index = 1;
let range = 4;
let randomPickScroller = function() {
  let colIndex = ++index % range;
  overItem.style.gridColumnStart = colIndex + 1;
};
randomPickScroller();

setInterval(()=>randomPickScroller(), 500);

.grid-container { display: grid; }
/* 'curtain' grid item is placed over the 'backdrop' grid item */
#backdrop, #curtain, #overItemId { grid-area: 1/1; }

#backdrop, #curtain {
  display: grid;
   grid-template-columns: repeat(4, 1fr);
}

/* Cosmetic things for showing the result*/
#backdrop { border: 1px solid red; }
#overItemId { border: 1px solid blue; }

<div class="grid-container">
  <div id="backdrop">
    <div>one</div>
    <div>two</div>
    <div>three</div>
    <div>four</div>  
  </div>
  <div id="curtain">
    <div id="overItemId">----</div>
  </div>
</div>

- SridharKritha

---

对于我的情况来说，这比顶级答案更好。第二个例子与此无关，应该被删除。 - ViktorMS

Answer 5

这里是 jsFiddle 的链接

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

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

使用Z-index将所需移动到顶部。

- TheTechGuy

Answer 6

将父级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>

在您的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

或者在你的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>

- Sridhar