在将一个人 div 覆盖在另一个人 div 上时，我需要帮助。
我的代码如下所示：
<div class="navi"></div>
<div id="infoi">
<img src="info_icon2.png" height="20" width="32"/>
</div>
很遗憾，我无法将div#infoi 或img 嵌套在第一个div.navi 中。
它必须是两个独立的divs，如图所示，但我需要知道如何将div#infoi 放在div.navi 的最右侧并居中在div.navi 的顶部。
【问题讨论】：
overflow: hidden 而被完全或部分屏蔽，请改用overflow: visible。
#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: absolute 了解position: relative 和子元素。
【讨论】：
absolutely 定位的元素相对于它们最近的显式定位 (position:absolute|relative|fixed) 父元素进行定位。只是进一步澄清...jsfiddle.net/p5jkc8gz
我不是程序员，也不是 CSS 专家，但我仍然在我的网页设计中使用您的想法。我也尝试过不同的分辨率：
#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 菜单设置为向右浮动。
【讨论】：
通过使用带有样式z-index:1; 和position: absolute; 的div，您可以将div 覆盖在任何其他div 上。
z-index 确定 div 'stack' 的顺序。 z-index 较高的 div 将出现在 z-index 较低的 div 前面。请注意，此属性仅适用于定位元素。
【讨论】：
这是你需要的：
function showFrontLayer() {
document.getElementById('bg_mask').style.visibility='visible';
document.getElementById('frontlayer').style.visibility='visible';
}
function hideFrontLayer() {
document.getElementById('bg_mask').style.visibility='hidden';
document.getElementById('frontlayer').style.visibility='hidden';
}#bg_mask {
position: absolute;
top: 0;
right: 0; bottom: 0;
left: 0;
margin: auto;
margin-top: 0px;
width: 981px;
height: 610px;
background : url("img_dot_white.jpg") center;
z-index: 0;
visibility: hidden;
}
#frontlayer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: 70px 140px 175px 140px;
padding : 30px;
width: 700px;
height: 400px;
background-color: orange;
visibility: hidden;
border: 1px solid black;
z-index: 1;
}
</style><html>
<head>
<META HTTP-EQUIV="EXPIRES" CONTENT="-1" />
</head>
<body>
<form action="test.html">
<div id="baselayer">
<input type="text" value="testing text"/>
<input type="button" value="Show front layer" onclick="showFrontLayer();"/> Click 'Show front layer' button<br/><br/><br/>
Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text
Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text
Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing textsting text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text
<div id="bg_mask">
<div id="frontlayer"><br/><br/>
Now try to click on "Show front layer" button or the text box. It is not active.<br/><br/><br/>
Use position: absolute to get the one div on top of another div.<br/><br/><br/>
The bg_mask div is between baselayer and front layer.<br/><br/><br/>
In bg_mask, img_dot_white.jpg(1 pixel in width and height) is used as background image to avoid IE browser transparency issue;<br/><br/><br/>
<input type="button" value="Hide front layer" onclick="hideFrontLayer();"/>
</div>
</div>
</div>
</form>
</body>
</html>【讨论】：
下面是一个 100% 基于 CSS 的简单解决方案。 “秘密”是在包装元素中使用display: inline-block。图片中的vertical-align: bottom 是一种克服某些浏览器在元素后添加的4px 填充的hack。
建议：如果包装器之前的元素是内联的，则它们最终可能是嵌套的。在这种情况下，您可以使用 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>【讨论】：
公认的解决方案效果很好，但 IMO 没有解释它为什么起作用。下面的示例归结为基础知识，并将重要的 CSS 与不相关的样式 CSS 分开。作为奖励，我还详细解释了 CSS 定位的工作原理。
TLDR；如果您只想要代码，请向下滚动到结果。
有两个独立的兄弟元素，目标是定位第二个元素（infoi 的 id），使其出现在前一个元素中（@987654324 的 class @)。 HTML 结构无法更改。
为了达到预期的效果，我们将移动或定位第二个元素，我们将其称为#infoi，使其出现在第一个元素中，我们将其称为.navi。具体来说，我们希望#infoi 位于.navi 的右上角。
CSS 有几个用于定位元素的属性。默认情况下，所有元素都是position: static。这意味着元素将根据其在 HTML 结构中的顺序进行定位，几乎没有例外。
其他position 值为relative、absolute、sticky 和fixed。通过将元素的 position 设置为这些其他值之一，现在可以使用以下四个属性的组合来定位元素：
toprightbottomleft换句话说，通过设置position: absolute，我们可以添加top: 100px，将元素定位在距页面顶部100像素的位置。相反，如果我们设置bottom: 100px，则元素将位于距页面底部 100 像素处。
这是许多 CSS 新手迷路的地方 - position: absolute 有一个参考框架。在上面的示例中，参考框架是body 元素。 position: absolute 和 top: 100px 表示元素位于距离 body 元素顶部 100 像素处。
可以通过将父元素的position 设置为position: static以外的任何值来更改位置参考框架或位置上下文。也就是说，我们可以通过给父元素创建一个新的位置上下文：
position: relative;position: absolute;position: sticky;position: fixed;例如，如果<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 {
position: absolute;
width: 50%;
height: 50%;
}
#bottom {
top: 0;
left: 0;
background-color: blue;
}
#top {
top: 25%;
left: 25%;
background-color: red;
}<div id="bottom">Bottom</div>
<div id="top">Top</div>可以使用 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 gives a new position context
*/
.wrapper {
position: relative;
}
/*
* The .navi properties are for styling only
* These properties can be changed or removed
*/
.navi {
background-color: #eaeaea;
height: 40px;
}
/*
* Position the #infoi element in the top-right
* of the .wrapper element
*/
#infoi {
position: absolute;
top: 0;
right: 0;
/*
* Styling only, the below can be changed or removed
* depending on your use case
*/
height: 20px;
padding: 10px 10px;
}<div class="wrapper">
<div class="navi"></div>
<div id="infoi">
<img src="http://via.placeholder.com/32x20/000000/ffffff?text=?" height="20" width="32"/>
</div>
</div>这是使用 CSS Grid 将 .navi 元素与最右侧的 #infoi 元素定位的替代解决方案。我使用了详细的grid 属性使其尽可能清晰。
:root {
--columns: 12;
}
/*
* Setup the wrapper as a Grid element, with 12 columns, 1 row
*/
.wrapper {
display: grid;
grid-template-columns: repeat(var(--columns), 1fr);
grid-template-rows: 40px;
}
/*
* Position the .navi element to span all columns
*/
.navi {
grid-column-start: 1;
grid-column-end: span var(--columns);
grid-row-start: 1;
grid-row-end: 2;
/*
* Styling only, the below can be changed or removed
* depending on your use case
*/
background-color: #eaeaea;
}
/*
* Position the #infoi element in the last column, and center it
*/
#infoi {
grid-column-start: var(--columns);
grid-column-end: span 1;
grid-row-start: 1;
place-self: center;
}<div class="wrapper">
<div class="navi"></div>
<div id="infoi">
<img src="http://via.placeholder.com/32x20/000000/ffffff?text=?" height="20" width="32"/>
</div>
</div>在我们无法编辑任何 HTML 的情况下，意味着我们无法添加包装元素，我们仍然可以达到预期的效果。
我们将使用position: relative，而不是在#infoi 元素上使用position: absolute。这允许我们将#infoi 元素从.navi 元素下方的默认位置重新定位。使用position: relative，我们可以使用负值top 将其从默认位置向上移动，使用left 值100% 减去几个像素，使用left: calc(100% - 52px)，将其定位在右侧附近.
/*
* The .navi properties are for styling only
* These properties can be changed or removed
*/
.navi {
background-color: #eaeaea;
height: 40px;
width: 100%;
}
/*
* Position the #infoi element in the top-right
* of the .wrapper element
*/
#infoi {
position: relative;
display: inline-block;
top: -40px;
left: calc(100% - 52px);
/*
* Styling only, the below can be changed or removed
* depending on your use case
*/
height: 20px;
padding: 10px 10px;
}<div class="navi"></div>
<div id="infoi">
<img src="http://via.placeholder.com/32x20/000000/ffffff?text=?" height="20" width="32"/>
</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>
【讨论】：
新的 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 构建，您的代码很可能会工作。
【讨论】：
relative position的父级，在这个父级中你可以设置你的div的absolute position
<div> <------Relative
<div/> <------Absolute
<div/> <------Absolute
<div/> <------Absolute
<div/>
最终结果：
https://codepen.io/hiteshsahu/pen/XWKYEYb?editors=0100
<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;
}
【讨论】：