Negative margin entferne Hintergrundeigenschaft von statischen Geschwistern
Ich benutze den negativen Rand unten, um das benachbarte Element zu ziehen und das aktuelle Element zu überlappen. Es ist meine Absicht, es überlappen zu lassen. Aber ich möchte, dass der ganze Div über dem Bild überlappt. Es stellte sich jedoch heraus, dass der Hintergrund des gezogenen Elements ebenfalls entfernt wird. Kann mir jemand das erklären?
<!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>http: //jsbin.com/mejoci/edit? html, css, output
EDITED: Es funktioniert irgendwie, wenn das Element positioniert ist (fest | relativ | absolut), aber nicht mit einer statischen Position, die die Standardposition ist, auch wenn die Position nicht festgelegt ist.