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

小开

最佳答案

#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的子元素。

小开

我不是一个程序员，也不是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菜单设置为向右浮动。

小开

通过使用带有样式z-index:1;和position: absolute;的div，您可以将div覆盖在任何其他div上。

z-index确定div“堆栈”的顺序。具有较高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 textTesting 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 textTesting 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填充。

咨询：如果包装器之前的元素是内联的，它们最终可能会嵌套。在这种情况下，您可以使用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；如果您只需要代码，请向下滚动到的结果。

问题

有两个独立的同级元素，目标是定位第二个元素（id ofinfoi），因此它出现在前一个元素中（class ofnavi）。超文本标记语言结构不能更改。

策略建议

为了实现预期的结果，我们将移动或定位第二个元素，我们将其称为#infoi，因此它出现在第一个元素中，我们将其称为.navi。具体来说，我们希望#infoi位于.navi的右上角。

CSS职位所需知识

CSS有几个用于定位元素的属性。默认情况下，所有元素都是position: static。这意味着元素将根据其在超文本标记语言结构中的顺序进行定位，只有少数例外。

其他position值是relative、absolute、sticky和fixed。通过将元素的position设置为这些其他值之一，现在可以使用以下四个属性的组合来定位元素：

top
right
bottom
left

换句话说，通过设置position: absolute，我们可以添加top: 100px来定位元素从页面顶部100像素。相反，如果我们设置bottom: 100px，元素将从页面底部定位100像素。

这里是许多CSS新手迷路的地方-position: absolute有一个参照系。在上面的示例中，参照系是body元素。position: absolute加上top: 100px意味着元素位于body元素顶部100像素处。

可以通过将父元素的position设置为除#1以外的任何值来更改位置参考框架或位置上下文。也就是说，我们可以通过给出父元素来创建一个新的位置上下文：

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方向上是如何堆叠的。这里必须知道的是，默认情况下，元素的堆栈顺序是由它们在超文本标记语言结构中的顺序相反定义的。考虑以下示例：

<body><div>Bottom</div><div>Top</div></body>

在此示例中，如果两个<div>元素位于页面上的同一位置，则<div>Top</div>元素将覆盖<div>Bottom</div>元素。由于<div>Top</div>在超文本标记语言结构中位于<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更改堆叠顺序。

我们可以忽略这个问题中的堆叠顺序，因为元素的自然超文本标记语言结构意味着我们希望出现在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;}

有了这个新的位置上下文，我们可以将#infoi定位在.wrapper中。首先，给#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>

替代（无包装）解决方案

如果我们不能编辑任何超文本标记语言，这意味着我们不能添加包装器元素，我们仍然可以达到预期的效果。

而不是在#infoi元素上使用position: absolute，我们将使用position: relative。这允许我们将#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>

点击这里：http://jsbin.com/fotozolucu/edit?html，CSS，输出

小开

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

最小的网格覆盖示例：

超文本标记语言

<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, 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 {position: absolute;background-color: #00bfa5;left:  30%;right: 30%;bottom:30%;top: 30%;margin:10px;padding:10px;color: white;font-size: large;}