如何将一个div覆盖在另一个div上

HTML

番长十三

2020-03-15

div在将一个人叠加到另一个人上时，我需要帮助div。

我的代码如下所示：

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

不幸的是，我不能将div#infoi或嵌套img在第一个内部div.navi。

div如图所示，它必须是两个单独的，但是我需要知道如何将放置在div#infoi上方div.navi和最右侧，并以的顶部为中心div.navi。

第1635篇《如何将一个div覆盖在另一个div上》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共5个回答
千羽 2020.03.15

我既不是CSS的编码员也不是专家，但是我在Web设计中仍在使用您的想法。我也尝试过不同的解决方案：

#wrapper {
  margin: 0 auto;
  width: 901px;
  height: 100%;
  background-color: #f7f7f7;
  background-image: url(images/wrapperback.gif);
  color: #000;
}
#header {
  float: left;
  width: 100.00%;
  height: 122px;
  background-color: #00314e;
  background-image: url(images/header.jpg);
  color: #fff;
}
#menu {
  float: left;
  padding-top: 20px;
  margin-left: 495px;
  width: 390px;
  color: #f1f1f1;
}
<div id="wrapper">
  <div id="header">
    <div id="menu">
      menu will go here
    </div>
  </div>
</div>

当然，它们两个周围都有包装纸。您可以控制菜单div的位置，该菜单div的左边距和顶部位置将显示在标题div中。您也可以根据需要将div菜单设置为浮动。

小宇宙Sam 2020.03.15

通过使用divwith样式z-index:1;，position: absolute;您可以将其叠加div在其他任何样式上div。

z-index确定div堆栈的顺序。具有较高div的div z-index将出现在具有较低div的div的前面z-index。请注意，此属性仅适用于定位的元素。

JimEva 2020.03.15

以下是基于CSS的简单解决方案100％。“秘密”是display: inline-block在包装元素中使用。该vertical-align: bottom图像中是克服4像素填充，有些浏览器元素后添加一个黑客。

建议：如果包装器之前的元素是内联的，则它们最终可能会嵌套。在这种情况下，您可以使用display: block通常是好旧的容器将容器“包裹” div。

.wrapper {
    display: inline-block;
    position: relative;
}

.hover {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 188, 212, 0);
    transition: background-color 0.5s;
}

.hover:hover {
    background-color: rgba(0, 188, 212, 0.8);
    // You can tweak with other background properties too (ie: background-image)...
}

img {
    vertical-align: bottom;
}
<div class="wrapper">
    <div class="hover"></div>
    <img src="http://placehold.it/450x250" />
</div>

Near路易小胖 2020.03.15

新的Grid CSS规范提供了更为优雅的解决方案。使用position: absolute网格可能会导致重叠或缩放问题，而Grid可以使您免受脏CSS黑客的攻击。

最小的网格叠加示例：

的HTML

<div class="container">
  <div class="content">This is the content</div>
  <div class="overlay">Overlay - must be placed under content in the HTML</div>
</div>

的CSS

.container {
  display: grid;
}

.content, .overlay {
  grid-area: 1 / 1;
}

而已。如果您不是为Internet Explorer构建的，则您的代码很可能会工作。

Mandy伽罗 2020.03.15 

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

我建议使用来了解position: relative和子元素position: absolute。

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android