如何将一个div叠加到另一个div上
ton*_*nyf 889 html css overlay position
我需要协助将一个人覆盖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.
ale*_*lex 1178
#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.
- 在这里实现了这个答案的例子:http://jsbin.com/edejus/1/edit (33认同)
- jsfiddle为那些想要看到它并玩它的人http://jsfiddle.net/Lr8Y8/ (10认同)
- `absolute`ly定位元素相对于它们最近的显式定位(`position:absolute | relative | fixed`)父元素定位.进一步说明...... http://jsfiddle.net/p5jkc8gz/ (8认同)
- 感谢亚历克斯的帮助,但我现在发现的是,当我调整窗口大小并将其拖动到更小时,我的信息图像不会停留在它的父级div.基本上希望它与父div一起移动并保持在相同的位置,即使屏幕已经稍微调整大小. (3认同)
- **@ tonsils:****alex**的说明应该给你想要的结果,所以必须有其他东西导致你描述的问题.您能否向我们提供代码示例(HTML + CSS),以便我们为您提供帮助？ (2认同)
Bre*_*ody 302
接受的解决方案效果很好,但IMO缺乏对其工作原理的解释.下面的示例归结为基础知识,并将重要的CSS与不相关的样式CSS分开.作为奖励,我还详细解释了CSS定位的工作原理.
TLDR; 如果您只想要代码,请向下滚动到结果.
问题
有2个独立的,兄弟姐妹,元件和目标是将第二元件(带有定位id的infoi),所以它显示前一个元素(具有一个内class的navi).HTML结构无法更改.
提出的解决方案
为了达到预期的效果,我们将移动或定位第二个元素,我们将调用#infoi它,因此它出现在第一个元素中,我们将调用它.navi.具体来说,我们希望#infoi位于右上角.navi.
CSS职位所需知识
CSS有几个定位元素的属性.默认情况下,所有元素都是position: static.这意味着元素将根据HTML结构中的顺序进行定位,几乎没有例外.
其他position值是relative,absolute和sticky.通过将元素设置fixed为这3个值中的一个,现在可以使用以下4个属性的组合来定位元素:
positiontoprightbottom
换句话说,通过设置left,我们可以添加position: absolute从页面顶部定位元素100px.相反,如果我们设置top: 100px元素将从页面底部定位100px.
这里有很多CSS新人迷路 -bottom: 100px有一个参考框架.在上面的示例中,引用框架是position: absolute元素.bodywithposition: absolute表示元素位于元素top: 100px顶部body.
可以通过将position父元素的值position: static设置为除以外的任何值来更改引用的位置框架或位置上下文.也就是说,我们可以通过给出一个父元素来创建一个新的位置上下文:
position: relative;position: absolute;position: sticky;
例如,如果position: fixed;给出了一个元素<div class="parent">,则任何子元素都使用该元素position: relative作为其位置上下文.如果子元素被赋予<div class="parent">和position: absolute,该元素将被定位在距顶部100像素top: 100px元素,因为<div class="parent">现在的位置上下文.
要注意的另一个因素是堆栈顺序 - 或者元素在z方向上的堆叠方式.这里必须知道的是,默认情况下,元素的堆栈顺序是由它们在HTML结构中的顺序相反定义的.请考虑以下示例:
<body>
<div>Bottom</div>
<div>Top</div>
</body>
在此示例中,如果两个<div class="parent">元素位于页面上的相同位置,则<div>元素将覆盖<div>Top</div>元素.由于<div>Bottom</div>后自带<div>Top</div>的HTML结构使其具有较高的堆叠顺序.
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>可以使用<div>Bottom</div>或z-index属性使用CSS更改堆叠顺序.
我们可以忽略这个问题中的堆叠顺序,因为元素的自然HTML结构意味着我们想要出现的元素出现在order另一个元素之后.
所以,回到手头的问题 - 我们将使用位置上下文来解决这个问题.
解决方案
如上所述,我们的目标是定位top元素,使其出现在#infoi元素中.为此,我们将把元素.navi和.navi元素包装在一个新元素中,#infoi这样我们就可以创建一个新的位置上下文.
<div class="wrapper">
<div class="navi"></div>
<div id="infoi"></div>
</div>
然后通过给出<div class="wrapper">一个新的位置上下文.wrapper.
.wrapper {
position: relative;
}
有了这个新的位置情况下,我们可以定位position: relative内#infoi.首先,给.wrapper一个#infoi,允许我们position: absolute绝对定位#infoi.
然后加入.wrapper并top: 0以位置right: 0在右上角元素.请记住,因为#infoi元素#infoi用作其位置上下文,所以它将位于.wrapper元素的右上角.
#infoi {
position: absolute;
top: 0;
right: 0;
}
因为.wrapper仅仅是一个容器.wrapper,位于.navi右上角的#infoi位置给出了位于右上角的效果.wrapper.
我们拥有它,.navi现在似乎位于右上角#infoi.
结果
下面的示例归结为基础知识,并包含一些最小的样式.
/*
* 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>备用(无包装)解决方案
在我们无法编辑任何HTML的情况下,意味着我们无法添加包装元素,我们仍然可以实现所需的效果.
我们将使用而不是.navi在position: absolute元素上使用#infoi.这允许我们position: relative从#infoi元素下面的默认位置重新定位元素.随着.navi我们可以用一个负position: relative数值从它的默认位置,并且将其向上top的价值left减去几个像素,使用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>- 这是最有用的入门IMO,因为它解释了它的工作原理! (18认同)
- 这可能是我迄今为止看到的定位工作的最佳解释.简洁,但足够深入,以使其正确. (13认同)
- 答案的质量也是如此。我见过的最清楚的解释。 (3认同)
- 这是一个很好的答案，特别是对于 css 新手来说 (3认同)
- 感谢您的解释 (3认同)
- 我不知道“位置：相对”是为了改变孩子们的行为。这是一个很好的答案，谢谢！：D (2认同)
- 地球需要更多你们这样的人！ (2认同)
小智 109
通过使用div带风格z-index:1;,position: absolute;您可以覆盖div任何其他div.
z-index确定div'堆栈'的顺序.较高的div z-index将出现在较低的div前面z-index.请注意,此属性仅适用于定位元素.
- 你能提供一个例子吗？ (5认同)
- 关于定位元素的注释至关重要。 (3认同)
Tuc*_*uco 21
以下是基于CSS的100%简单解决方案."秘密"是display: inline-block在包装元素中使用.该vertical-align: bottom图像中是克服4像素填充,有些浏览器元素后添加一个黑客.
建议:如果包装器之前的元素是内联的,则它们最终可以嵌套.在这种情况下,你可以用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>Dha*_*kor 19
这就是你需要的:
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>小智 17
新的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 under content in the HTML</div>
</div>
的CSS
.container {
display: grid;
}
.content, .overlay {
grid-area: 1 / 1;
}
而已。如果您不是为Internet Explorer构建的，则您的代码很可能会工作。
- 这应该是最佳答案。 (13认同)
- 高级答案。应重新评估所选答案。 (8认同)
- 完美解决方案 (4认同)
我不是一个编程人员,也不是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菜单设置为向右浮动.希望这可以帮助.
你需要添加一个父级relative position，在这个父级中你可以设置absolute position你的 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 放在绝对位置
在容器上方的 TOP
.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;
}