如何将一个div重叠在另一个div上 [英] How to overlay one div over another div

问题描述

希望有人可以帮助，但我需要帮助，将一个人 div 与另一个人 div 重叠。

我的代码如下所示：

 < div class =navi >< / div> 
< div id =infoi>< img src =info_icon2.pngheight =20width =32/>< / div>不幸的是我不能嵌套 div＃infoi  
 
 

或 img 在 div.navi 中。

它必须是两个单独的 div 如图所示，但我需要知道如何可以放置 div＃infoi div.navi 和最右侧并以 div.navi 为顶端居中。

解决方案

  #container {width：100px; height：100px; position：relative;}＃navi，＃infoi {width：100％;高度：100％; position：absolute; top：0; left：0;}＃infoi {z-index：10;}  

 < div id =container> < div id =navi> a< / div> < div id =infoi> < img src =https://appharbor.com/assets/images/stackoverflow-logo.pngheight =20width =32/> b< / div>< / div> code> 

我建议学习 / code>和子元素 position：absolute 。

Hoping someone can assist but I need assistance with overlaying one individual div over another individual div.

My code looks like this:

<div class="navi"></div>
<div id="infoi"><img src="info_icon2.png" height="20" width="32"/></div>

Unfortunately I cannot nest the div#infoi or the img, inside the first div.navi.

It has to be two separate divs as shown but I need to know how I could place the div#infoi over the div.navi and to the right most side and centered on top of the div.navi.

Would appreciate any help in achieving this.

解决方案

#container {
  width: 100px;
  height: 100px;
  position: relative;
}
#navi,
#infoi {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
#infoi {
  z-index: 10;
}

<div id="container">
  <div id="navi">a</div>
  <div id="infoi">
    <img src="https://appharbor.com/assets/images/stackoverflow-logo.png" height="20" width="32" />b
  </div>
</div>

I would suggest learning about position: relative and child elements with position: absolute.

这篇关于如何将一个div重叠在另一个div上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！