I use the negative edge at the bottom to draw the adjacent element to the overlap of the current element. I intend 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 item being pulled. Can someone explain this?
<!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: it works when an element is positioned (fixed | relative | absolute), but not with a static position, which is the default position, even when the position is not set.
source
share