在另一个上面显示一个div

Question

我有一些带有两个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>

我希望第二个div #curtain出现在div的顶部#backdrop.两个div的大小相同,但是我不确定如何将第二个div放在另一个div之上.

Answer 1

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

您可以使用z-index: x;设置垂直"顺序"(哪一个是"在顶部").替换x为数字,较高的数字位于较低的数字之上.

以下是您的新代码的外观:

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

Answer 2

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

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

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

Answer 3

要在另一个上面正确显示一个div,我们需要使用position如下属性:

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

我发现了一个很好的例子,在这里:

.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 ,我希望这会有所帮助.

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，并且 col = 1 索引和最后的 div(“curtain”) 覆盖先前的 div（如果有）。

另一个例子 - 将一个 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>