Getting an "overlap" effect with Bootstrap divs - html

Question

So I have a full-width row and I want to have an image that extends a bit outside the top and bottom boundaries of the row, so as to look like a sticker holding a ribbon to the website. How do I achieve this "overlap" effect in CSS?
As far as I can tell, you can nest divs within each other or float them side-by-side, but you can't put a taller div on top of a thinner one and get this overlap effect to work. What am I missing?
I'm using Bootstrap... if there is some kind of grid-based solution to this that would be awesome.
EDIT: Code! Here's the HTML.
<div class="row-fluid redRibbon">
<div class="bodyContainer">
<img id="isocert" src="img/isocert.png">
</div>
</div>
And relevant CSS (row-fluid is a default class in Bootstrap):
.bodyContainer{
padding: 15px;
width: 800px;
margin: auto;
}
.redRibbon{
background-color: #AF002A;
color: white;
}
#isocert{
overflow: visible;
}
I would post a picture but I don't have enough reputation :(

Answer 1

Give your .row the style or CSS rule position: relative; and now give your image you want to overlap that row position: absolute; but keep it placed inside the row. Now it will be placed relative to your .row but you can adjust its position with the CSS attributes top, right, bottom, and left. Furthermore you can make it bigger than the row (via CSS or image attributes) and it will not influence the dimensions of your .row. Should it be cut by an other element you can give it an higher z-index. With this values you should be able to get your desired effect.
EDIT
So your code could look like something like this in the end:
.bodyContainer{
padding: 15px;
width: 800px;
margin: auto;
}
.redRibbon{
margin-top: 200px;
background-color: #AF002A;
color: white;
position: relative;
}
#isocert{
overflow: visible;
position: absolute;
top: -50px;
}
Here is a fiddle with an example: http://jsfiddle.net/L1wn66v8/

Answer 2

One option (in the absence of any supplied code) is to position the image with relative positioning.
div {
width: 50%;
border: 1px solid grey;
margin: 25px auto;
}
img {
float: left;
position: relative;
top: 50px;
left: -50px;
width: 100px;
border: 1px solid red;
}
<div>
<img src="http://www.clipartpal.com/_thumbs/pd/education/award_ribbon_blue_T.png" alt="" />
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus hic dicta dignissimos consequuntur mollitia enim fuga inventore tempore totam ad libero eveniet voluptatum iusto quis unde deleniti doloribus quos veniam perspiciatis rerum in cum
facilis maxime. Reiciendis corporis dolor tenetur at sunt quidem asperiores natus ad soluta fuga maiores expedita vero explicabo rem consequuntur accusantium similique alias odio cupiditate quaerat eligendi! Laborum illum earum pariatur minus sunt
eaque praesentium cum libero nihil voluptatibus dolorem eum. Eveniet nobis mollitia</p>
</div>
Note that the text continues to wrap around the image as though it was still in the same place. The element is only moved visually, any other elements will still treat it as though it had not been moved.
As an alternative, you could position it absolutely, but relative to the parent. In this case, the element is taken out of the flow and other elements will not react to it in the same way..
div {
width: 50%;
border: 1px solid grey;
margin: 25px auto;
position: relative;
}
img {
position: absolute;
top: 50px;
left: -50px;
width: 100px;
border: 1px solid red;
}
<div>
<img src="http://www.clipartpal.com/_thumbs/pd/education/award_ribbon_blue_T.png" alt="" />
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus hic dicta dignissimos consequuntur mollitia enim fuga inventore tempore totam ad libero eveniet voluptatum iusto quis unde deleniti doloribus quos veniam perspiciatis rerum in cum
facilis maxime. Reiciendis corporis dolor tenetur at sunt quidem asperiores natus ad soluta fuga maiores expedita vero explicabo rem consequuntur accusantium similique alias odio cupiditate quaerat eligendi! Laborum illum earum pariatur minus sunt
eaque praesentium cum libero nihil voluptatibus dolorem eum. Eveniet nobis mollitia</p>
</div