负余量删除静态同级的背景属性 [英] Negative margin remove background property of static siblings
问题描述
我在底部使用负边距拉动相邻元素重叠电流元素。我打算把它重叠。但我想让整个div重叠在图像上方。但是，事实证明，它删除了拉的元素的背景，以及。有人能解释这个吗？
<！DOCTYPE html>< html>< head>< script src =https://code.jquery.com /jquery.min.js\"> ;</script> ;<link href =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css =stylesheettype =text / css/>< script src =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js>< / script> < meta charset =utf-8> < meta name =viewportcontent =width = device-width> < title> JS Bin< / title>< / head>< body> < style> .div1 {background-color：black; } img {margin-bottom：-20px; }< / style> < div class =container> < div class =row> < div class =col-xs-4> < img src =http://placehold.it/200x300alt => < div class =div1>这里是示例文本< / div> < / div> < / div> < / div>< / body>< / html>
http://jsbin.com/mejoci/edit?html,css,output
EDITED：当元素定位（固定|相对|绝对）时，它是有用的，但静态位置是默认位置，即使位置不是组。
在示例代码中，两个元素共享相同的堆叠上下文。
在这种情况下，定义元素如何分层的规则在中定义规范如下：（bold是我的）
在每个堆叠上下文中， - 前面的顺序：
- 形成堆叠上下文的元素的背景和边框。
- 子堆叠上下文与负堆叠级别（最负的第一）。
- 流入，非内联级别，不定位后代。 >
- 未定位的浮动广告。
- 包含内置表格和内嵌广告的流内， / strong>
- 子级堆栈上下文与堆栈级别0和定位后代与堆栈级别0。
- （最小正第一）。
因此，您可以在同一个堆叠上下文 内联级元素（＃3）（＃5） 所以在你的case - 因为 查看此代码演示，进一步说明了这一点 额外阅读： I am using negative margin on bottom to pull the adjacent element to overlap current element. It is my intention to make it overlap. But I want the whole div to be overlapped above the image. But, it turned out that it removes the background of the pulled element as well. Can someone explained this?
http://jsbin.com/mejoci/edit?html,css,output EDITED: It is kinda working when the element is positioned(fixed|relative|absolute) but not with static position which is the default position even when position is not set. In your sample code, both elements share the same stacking context. That being the case, the rules which define how elements are layered are defined in the spec as follows: (bold is mine) Within each stacking context, the following layers are painted in back-to-front order:
So you can see that - within the same stacking context - inline-level elements (#5) are painted above non-inline-level elements (#3) So in your case - since both the Check out this codepen demo which illustrates this point further Extra reading: Elaborate description of Stacking Contexts Stacking without z-index (MDN) Z-Index And The CSS Stack: Which Element Displays First? 这篇关于负余量删除静态同级的背景属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
< img> 和< div> 共享相同的堆叠上下文，并且< img> 元素是内联级元素 - 它在上面 >< div> - 即使< div> 稍后出现在文档树顺序中。
$ b
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<style>
.div1 {
background-color: black;
}
img {
margin-bottom:-20px;
}
</style>
<div class="container">
<div class="row">
<div class="col-xs-4">
<img src="http://placehold.it/200x300" alt="">
<div class="div1">
Here is example text
</div>
</div>
</div>
</div>
</body>
</html>
<img> and the <div> share the same stacking context and the <img> element is an inline-level element - it is painted above the <div> - even though the <div> occurs later in the document tree order.
