如何覆盖另一个div的一个div
希望有人可以协助，但我需要协助覆盖一个单独的div在另一个div 。
我的代码如下所示：
<div class="navi"></div> <div id="infoi"> <img src="info_icon2.png" height="20" width="32"/> </div>
不幸的是，我不能在第一个div.navi里嵌套div#infoi或者img 。
它必须是如图所示的两个单独的div ，但我需要知道如何将div#infoi放在div.navi并且放在div.navi的最右边最右侧。
将不胜感激任何帮助实现这一点。
#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/assetshttp://img.dovov.comstackoverflow-logo.png" height="20" width="32" />b </div> </div>
通过使用样式为z-index:1;的div z-index:1; 和position: absolute; 你可以覆盖你的div在任何其他div 。
z-index决定了divs'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>
这里遵循一个基于CSS的100％的简单解决方案。 “秘密”是使用包装元素中的display: inline-block 。 图像中的vertical-align: block是一个黑客，可以克服一些浏览器在元素之后添加的4px填充。
建议 ：如果包装之前的元素是内联的，他们可以嵌套。 在这种情况下，你可以使用display: block来“包装”包装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>
我不是一个编码器，也不是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>
被接受的解决方案效果很好，但国际海事组织没有解释为什么它的工作原理。 下面的例子归结为基础知识，并将重要的CSS从不相关的样式CSS中分离出来。 作为奖励，我还包括了CSS定位如何工作的详细说明。
TLDR; 如果您只需要代码，请向下滚动至“结果” 。
问题
有2个单独的兄弟元素，目标是定位第二个元素（ id为infoi ），使其出现在前一个元素（具有navi类的元素）中。 HTML结构不能改变。
建议的解决方案
为了达到理想的结果，我们将移动或定位第二个元素，我们将其称为#infoi ，使其出现在第一个元素中，我们将其称为.navi 。 具体来说，我们希望#infoi位于.navi右上角。
CSS职位所需的知识
CSS有几个定位元素的属性。 默认情况下，所有的元素都是position: static 。 这意味着元素将按照HTML结构中的顺序进行定位，只有少数例外。
其他position值是relative ， absolute和fixed 。 通过将元素的position设置为这三个值中的一个，现在可以使用以下4个属性的组合来定位该元素：
-
top -
right -
bottom -
left
换句话说，通过设置position: absolute ，我们可以添加top: 100px来从页面顶部放置100px的元素。 相反，如果我们设置bottom: 100px ，元素将从页面底部定位100px。
这里是许多CSS新手丢失的地方 – position: absolute有一个参考框架。 在上面的例子中，引用的框架是body元素。 position: absolute top: 100px意味着元素位于距元素top: 100px 。
引用的位置框架或位置上下文可以通过将父元素的position设置为除position: static之外的任何值来更改。 也就是说，我们可以通过给父元素创建一个新的位置上下文：
-
position: absolute; -
position: relative; -
position: fixed;
例如，如果一个<div class="parent">元素被赋予position: relative ，任何子元素都使用<div class="parent">作为它们的位置上下文。 如果一个子元素被赋予position: absolute和top: 100px ，则该元素将位于距离<div class="parent">元素顶部100px处，因为<div class="parent">现在是位置上下文。
我们将使用位置上下文来解决这个问题
解决方案
如上所述，我们的目标是定位#infoi元素，使其出现在.navi元素中。 为此，我们将.navi和#infoi元素封装在一个新的元素<div class="wrapper">这样我们可以创建一个新的位置上下文。
<div class="wrapper"> <div class="navi"></div> <div id="infoi"></div> </div>
然后通过给.wrapper一个position: relative创建一个新的位置上下文position: relative 。
.wrapper { position: relative; }
有了这个新的位置上下文，我们可以将#infoi放在.wrapper 。 首先，给#infoi一个position: absolute ，允许我们将#infoi完全放在.wrapper 。
然后添加top: 0和right: 0以将#infoi元素放置在右上角。 请记住，因为#infoi元素使用.wrapper作为它的位置上下文，它将位于.wrapper元素的.wrapper 。
#infoi { position: absolute; top: 0; right: 0; }
由于.wrapper仅仅是.wrapper的一个容器， #infoi在#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>
