Отрицательное поле удаляет фоновое свойство статических братьев и сестер
Я использую отрицательное поле снизу, чтобы вытянуть соседний элемент, чтобы перекрыть текущий элемент. Я намерен сделать так, чтобы это перекрывалось. Но я хочу, чтобы весь 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" 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
РЕДАКТИРОВАНИЕ: Это своего рода работает, когда элемент позиционирован (фиксированный | относительный | абсолютный), но не со статической позицией, которая является позицией по умолчанию, даже если позиция не установлена.