Making an image appear over the border of a div - html

Question

I'm trying to make the below image.
The blue box is a div, the red square is a centrally-aligned image. The image overlaps the border of the div, but lies under the text in the div.
How would I go about this?

Answer 1

Explanation
Overlap
z-index is nice if you need div in different layer.
A div with smaller z-index will stay at back, so you can label border.
(Although I think it is not necessary in this case)
Center Align
To Align image in the center, add auto margin to image.
Image Position
If you want 30% of image to be inside the border, move top of the image by -70% of the height. So if the height of image is 100px, set top: -70px;
Text Position
Because the original image cover the space above the text, you will have to move text up to cover the blank space. To do this, move top of the text by the height of the image. So in this case, set top: -100px; After moving up the text, the space appear in the bottom of the devision. So to shrink the border, you will need to set margin-bottom: -100px; This will shrink the div to remove the blank taken by
Whole Div Position
Because you moved the image 70px above the whole div, you will need to set margin-top: 70px; to move the whole div down to prevent it being cropped out.
.border-div{
border: 3px solid blue;
margin-top: 70px;
z-index: -1;
}
.redsquare{
height: 100px;
width: 100px;
background-color: red;
z-index: 0;
margin: 0 auto;
position: relative;
top: -50px;
}
.text{
position: relative;
top: -100px;
z-index: 1;
margin-bottom: -100px;
}
<div class="border-div">
<div class="redsquare"></div>
<div class="text">Lorem ipsum has become the industry standard for design mockups and prototypes. By adding a little bit of Latin to a mockup, you’re able to show clients a more complete version of your design without actually having to invest time and effort drafting copy.
But despite all its benefits, seeing the same random Latin text in every design can get a little boring for you and your clients. So if you have a client who’s got a sense of humour or if you’re just tired of going the traditional route in your mockups, here are 15 creative and funny lorem ipsum text generators that are sure to lighten the mood at any client meeting.
</div>

Answer 2

My best suggestion is using position absolute in the children and use position relative in its border then set position to the children. Some thing like: https://jsfiddle.net/c39xej68/4/
.redsqr {
background-color: red;
height: 50px;
width: 50px;
position: absolute;
top: -30px;
margin: auto;
}
.bounder {
position: relative;
}
.text {
border: 1px solid blue;
}