在将一个个体 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 的顶部。
overflow: hidden 而被完全或部分屏蔽，请改用 overflow: visible。
#container { 宽度：100px;高度：100px；位置：相对； } #navi, #infoi { 宽度：100%;高度：100%；位置：绝对；顶部：0；左：0； } #infoi { z-index: 10; }
b
我建议了解 position: relative 和 position: absolute 的子元素。
公认的解决方案效果很好，但 IMO 缺乏对其工作原理的解释。下面的示例归结为基础知识，并将重要的 CSS 与不相关的样式 CSS 分开。作为奖励，我还详细解释了 CSS 定位的工作原理。
TLDR；如果您只想要代码，请向下滚动到结果。
问题
有两个独立的兄弟元素，目标是定位第二个元素（id 为 infoi），因此它出现在前一个元素中（class 为 navi 的那个）。 HTML 结构无法更改。
建议的解决方案
为了达到预期的效果，我们将移动或定位第二个元素，我们将其称为 #infoi，使其出现在第一个元素中，我们将其称为 .navi。具体来说，我们希望 #infoi 位于 .navi 的右上角。
CSS职位所需知识
CSS 有几个用于定位元素的属性。默认情况下，所有元素都是 position: static。这意味着元素将根据其在 HTML 结构中的顺序进行定位，几乎没有例外。
其他 position 值为 relative、absolute、sticky 和 fixed。通过将元素的 position 设置为这些其他值之一，现在可以使用以下四个属性的组合来定位元素：
最佳
正确的
底部
剩下
换句话说，通过设置 position: absolute，我们可以添加 top: 100px 以将元素定位到距页面顶部 100 像素的位置。相反，如果我们设置 bottom: 100px，则元素将位于距页面底部 100 像素处。
这是许多 CSS 新手迷路的地方 - position: absolute 有一个参考框架。在上面的示例中，参考框架是 body 元素。 position: absolute 和 top: 100px 表示元素位于距 body 元素顶部 100 像素处。
可以通过将父元素的 position 设置为 除 position: static 之外的任何值来更改位置参考框架或位置上下文。也就是说，我们可以通过给出一个父元素来创建一个新的位置上下文：
位置：相对；
位置：绝对；
位置：粘性；
位置：固定；
例如，如果给定 <div class="parent"> 元素 position: relative，则任何子元素都使用 <div class="parent"> 作为其位置上下文。如果给定子元素 position: absolute 和 top: 100px，则该元素将位于距 <div class="parent"> 元素顶部 100 像素的位置，因为 <div class="parent"> 现在是位置上下文。
另一个需要注意的因素是堆叠顺序 - 或者元素如何在 z 方向堆叠。这里必须知道的是元素的堆栈顺序，默认情况下，由它们在 HTML 结构中的顺序相反的顺序定义。考虑以下示例：
<body>
<div>Bottom</div>
<div>Top</div>
</body>
在此示例中，如果两个 <div> 元素位于页面上的同一位置，则 <div>Top</div> 元素将覆盖 <div>Bottom</div> 元素。由于 <div>Top</div> 在 HTML 结构中位于 <div>Bottom</div> 之后，因此它具有更高的堆叠顺序。
div {位置：绝对；宽度：50%；高度：50%； } #bottom { 顶部：0;左：0；背景颜色：蓝色； } #top { 顶部：25%;左：25%；背景颜色：红色； }
可以使用 z-index 或 order 属性通过 CSS 更改堆叠顺序。
我们可以忽略此问题中的堆叠顺序，因为元素的自然 HTML 结构意味着我们希望出现在 top 上的元素位于另一个元素之后。
所以，回到手头的问题——我们将使用位置上下文来解决这个问题。
解决方案
如上所述，我们的目标是定位 #infoi 元素，使其出现在 .navi 元素中。为此，我们将 .navi 和 #infoi 元素包装在一个新元素 <div class="wrapper"> 中，以便我们可以创建一个新的位置上下文。
<div class="wrapper">
<div class="navi"></div>
<div id="infoi"></div>
</div>
然后通过给 .wrapper 一个 position: relative 创建一个新的位置上下文。
.wrapper {
position: relative;
}
有了这个新的位置上下文，我们可以在 .wrapper 中定位 #infoi。首先，给 #infoi 一个 position: absolute，允许我们将 #infoi 绝对定位在 .wrapper 中。
然后添加 top: 0 和 right: 0 以将 #infoi 元素定位在右上角。请记住，因为 #infoi 元素使用 .wrapper 作为其位置上下文，它将位于 .wrapper 元素的右上角。
#infoi {
position: absolute;
top: 0;
right: 0;
}
因为 .wrapper 只是 .navi 的容器，所以将 #infoi 定位在 .wrapper 的右上角会产生定位在 .navi 右上角的效果。
现在我们有了它，#infoi 现在似乎位于 .navi 的右上角。
结果
下面的示例归结为基础知识，并包含一些最小的样式。
/* * position: relative 给出一个新的位置上下文 */ .wrapper { position: relative; } /* * .navi 属性仅用于样式 * 这些属性可以更改或删除 */ .navi { background-color: #eaeaea;高度：40px； } /* * 将 #infoi 元素定位在 .wrapper 元素的右上角 */ #infoi { position: absolute;顶部：0；右：0； /* * 仅样式，以下可以更改或删除 * 取决于您的用例 */ height: 20px;填充：10px 10px； }
替代（网格）解决方案
这是使用 CSS Grid 将 .navi 元素与最右侧的 #infoi 元素定位的替代解决方案。我使用了详细的 grid 属性使其尽可能清晰。
:root { --columns: 12; } /* * 将包装器设置为 Grid 元素，12 列，1 行 */ .wrapper { display: grid;网格模板列：重复（var（--columns），1fr）；网格模板行：40px； } /* * 定位 .navi 元素以跨越所有列 */ .navi { grid-column-start: 1; grid-column-end: span var(--columns);网格行开始：1；网格行端：2； /* * 仅样式，以下可以更改或删除 * 取决于您的用例 */ background-color: #eaeaea; } /* * 将#infoi 元素定位在最后一列，并将其居中 */ #infoi { grid-column-start: var(--columns);网格列端：跨度 1；网格行开始：1；地方自我：中心； }
替代（无包装）解决方案
在我们无法编辑任何 HTML 的情况下，意味着我们无法添加包装元素，我们仍然可以达到预期的效果。
我们将使用 position: relative，而不是在 #infoi 元素上使用 position: absolute。这允许我们将 #infoi 元素从 .navi 元素下方的默认位置重新定位。对于 position: relative，我们可以使用负 top 值将其从默认位置向上移动，并使用 left 值 100% 减去几个像素，使用 left: calc(100% - 52px) 将其定位在右侧附近.
/* * .navi 属性仅用于样式 * 这些属性可以更改或删除 */ .navi { background-color: #eaeaea;高度：40px；宽度：100%； } /* * 将 #infoi 元素定位在 .wrapper 元素的右上角 */ #infoi { position: relative;显示：内联块；顶部：-40 像素；左：计算（100% - 52px）； /* * 仅样式，以下可以更改或删除 * 取决于您的用例 */ height: 20px;填充：10px 10px； }
position:relative，在子 div 上使用 position:absolute 或 position:fixed。
position : relative 是为了改变孩子们的行为。这是一个很好的答案，谢谢！ :D
通过使用具有样式 z-index:1; 和 position: absolute; 的 div，您可以将您的 div 覆盖在任何其他 div 上。
z-index 确定 div 'stack' 的顺序。 z-index 较高的 div 将出现在 z-index 较低的 div 前面。请注意，此属性仅适用于定位元素。
新的 Grid CSS 规范提供了更优雅的解决方案。使用 position: absolute 可能会导致重叠或缩放问题，而 Grid 将使您免于脏 CSS hack。
最小的网格叠加示例：
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 构建，您的代码很可能会工作。
您需要添加一个具有相对位置的父级，在此父级内您可以设置 div 的绝对位置
<div> <------Relative
<div/> <------Absolute
<div/> <------Absolute
<div/> <------Absolute
<div/>
最后结果：
https://codepen.io/hiteshsahu/pen/XWKYEYb?editors=0100
https://i.stack.imgur.com/Ef5uz.jpg
<div class="container">
<div class="header">TOP: I am at Top & above of body container</div>
<div class="center">CENTER: I am at Top & in Center of body container</div>
<div class="footer">BOTTOM: I am at Bottom & above of body container</div>
</div>
设置 HTML 正文全宽
html, body {
overflow: hidden;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
之后，您可以设置一个具有相对位置的 div 以获取全宽和全高
.container {
position: relative;
background-color: blue;
height: 100%;
width: 100%;
border:1px solid;
color: white;
background-image: url("https://images.pexels.com/photos/5591663/pexels-photo-5591663.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
background-color: #cccccc;
}
在这个具有相对位置的 div 里面，你可以把你的 div 放在绝对位置
在容器上方的顶部
.header {
position: absolute;
margin-top: -10px;
background-color: #d81b60 ;
left:0;
right:0;
margin:15px;
padding:10px;
font-size: large;
}
在容器上方的底部
.footer {
position: absolute;
background-color: #00bfa5;
left:0;
right:0;
bottom:0;
margin:15px;
padding:10px;
color: white;
font-size: large;
}
在容器上方的 CENTER
.center {
position: absolute;
background-color: #00bfa5;
left: 30%;
right: 30%;
bottom:30%;
top: 30%;
margin:10px;
padding:10px;
color: white;
font-size: large;
}
下面是一个 100% 基于 CSS 的简单解决方案。 “秘密”是在包装元素中使用 display: inline-block。图片中的 vertical-align: bottom 是一种克服某些浏览器在元素后添加的 4px 填充的技巧。
建议：如果包装器之前的元素是内联的，则它们最终可能是嵌套的。在这种情况下，您可以使用 display: block 将包装器“包装”在一个容器内 - 通常是一个很好的旧 div。
.wrapper { 显示：内联块；位置：相对； } .hover { 位置：绝对；顶部：0；左：0；右：0；底部：0；背景颜色：rgba(0, 188, 212, 0);过渡：背景色0.5s； } .hover:hover { 背景颜色：rgba(0, 188, 212, 0.8); // 你也可以调整其他背景属性（即：背景图像）... } img { vertical-align: bottom; }
这就是你需要的：
函数 showFrontLayer() { document.getElementById('bg_mask').style.visibility='visible'; document.getElementById('frontlayer').style.visibility='visible'; } 函数 hideFrontLayer() { document.getElementById('bg_mask').style.visibility='hidden'; document.getElementById('frontlayer').style.visibility='hidden'; } #bg_mask { 位置：绝对；顶部：0；右：0；底部：0；左：0；边距：自动；边距顶部：0px；宽度：981px；高度：610px；背景：url（“img_dot_white.jpg”）中心； z-index：0；可见性：隐藏； } #frontlayer { 位置：绝对；顶部：0；右：0；底部：0；左：0；边距：70px 140px 175px 140px；填充：30px；宽度：700px；高度：400px；背景颜色：橙色；可见性：隐藏；边框：1px纯黑色； z-index：1； }
我不是程序员，也不是 CSS 专家，但我仍然在我的网页设计中使用你的想法。我也尝试过不同的解决方案：
#wrapper { 边距：0 自动；宽度：901px；高度：100%；背景颜色：#f7f7f7；背景图片：网址（图片/wrapperback.gif）；颜色：#000； } #header { 浮动：左；宽度：100.00%；高度：122px；背景颜色：#00314e；背景图片：网址（图片/header.jpg）；颜色：#fff; } #menu { 浮动：左；填充顶部：20px；左边距：495px；宽度：390 像素；颜色：#f1f1f1； }
当然，它们都会有一个包装器。您可以控制菜单 div 的位置，该菜单 div 将显示在带有左边距和顶部位置的标题 div 中。如果您愿意，您还可以将 div 菜单设置为向右浮动。
这是一个简单的示例，可以在另一个 div 上添加带有加载图标的叠加效果。
<style>
#overlay {
position: absolute;
width: 100%;
height: 100%;
background: black url('icons/loading.gif') center center no-repeat; /* Make sure the path and a fine named 'loading.gif' is there */
background-size: 50px;
z-index: 1;
opacity: .6;
}
.wraper{
position: relative;
width:400px; /* Just for testing, remove width and height if you have content inside this div */
height:500px; /* Remove this if you have content inside */
}
</style>
<h2>The overlay tester</h2>
<div class="wraper">
<div id="overlay"></div>
<h3>Apply the overlay over this div</h3>
</div>
在这里试试：http://jsbin.com/fotozolucu/edit?html,css,output
关注公众号
不定期副业成功案例分享
absolute定位的元素相对于它们最近的显式定位 (position:absolute|relative|fixed) 父元素进行定位。只是进一步澄清... jsfiddle.net/p5jkc8gz