我需要协助覆盖一个单独的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顶部。
当前回答
我不是一个程序员，也不是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菜单设置为右浮动。
其他回答
公认的解决方案非常有效，但国际海事组织缺乏对其为何有效的解释。下面的例子被归结为基础，并将重要的CSS从无关的样式CSS中分离出来。另外，我还详细解释了CSS定位的工作原理。
TLDR;如果你只想要代码，向下滚动到结果。
这个问题
有两个独立的兄弟元素，目标是定位第二个元素(id为infoi)，因此它出现在前一个元素(类为navi的元素)中。HTML结构不可更改。
建议的解决方案
为了达到预期的结果，我们将移动或定位第二个元素，我们将其称为#infoi，以便它出现在第一个元素中，我们将其称为.navi。具体来说，我们希望#infoi被定位在.navi的右上角。
CSS岗位要求知识
CSS有几个定位元素的属性。默认情况下，所有元素都是position: static。这意味着元素将根据其在HTML结构中的顺序进行定位，几乎没有例外。
其他位置值是相对的、绝对的、粘滞的和固定的。通过将元素的位置设置为其他值之一，现在可以使用以下四个属性的组合来定位元素:
前 正确的 底 左
换句话说，通过设置position: absolute，我们可以添加top: 100px来将元素定位到距离页面顶部100像素的位置。相反，如果我们设置bottom: 100px，元素将位于距离页面底部100像素处。
这是许多CSS新手迷失的地方——位置:绝对有一个参照系。在上面的例子中，参考框架是body元素。Position: absolute with top: 100px表示该元素位于距离body元素顶部100像素处。
位置参考系或位置上下文可以通过将父元素的位置设置为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>元素。因为在HTML结构中<div>Top</div>在<div>Bottom</div>之后，所以它有更高的堆叠顺序。
div { 位置:绝对的; 宽度:50%; 高度:50%; ｝ #{底部 上图:0; 左:0; 背景颜色:蓝色; ｝ #{顶部 上图:25%; 左:25%; 背景颜色:红色; ｝ 底< div id = "底" > < / div > < div id = "顶级" >顶部< / div >
可以使用z-index或order属性在CSS中更改堆叠顺序。
在这个问题中，我们可以忽略元素的堆叠顺序，因为元素的自然HTML结构意味着我们想要出现在顶部的元素位于其他元素之后。
所以，回到手头的问题——我们将使用位置上下文来解决这个问题。
解决方案
如上所述，我们的目标是定位#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一个位置:absolute，允许我们在.wrapper中绝对放置#infoi。
然后添加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元素位于最右边。我使用了verbose网格属性使其尽可能清晰。
: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的情况下，这意味着我们不能添加包装器元素，我们仍然可以达到预期的效果。
在#infoi元素上，我们不再使用position: absolute，而是使用position: relative。这允许我们将#infoi元素从.navi元素下方的默认位置重新定位。对于position: relative，我们可以使用一个负的顶部值将它从默认位置向上移动，并使用left: calc(100% - 52px)将左侧值100%减去几个像素，将它放置在右侧附近。
/* * 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的绝对位置
<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 {
position: absolute;
background-color: #00bfa5;
left: 30%;
right: 30%;
bottom:30%;
top: 30%;
margin:10px;
padding:10px;
color: white;
font-size: large;
}
新的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 after content in the HTML</div>
</div>
CSS
.container {
display: grid;
}
.content, .overlay {
grid-area: 1 / 1;
}
就是这样。如果您不是为Internet Explorer构建的，那么您的代码很可能可以工作。
下面是一个100%基于CSS的简单解决方案。“秘密”是在包装器元素中使用display: inline块。图片中的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>
下面是一个简单的例子，用一个加载图标覆盖另一个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
