Position image and keep fluid with text - css

Question

I am trying to make it where this picture of a Pen is behind the "Create" text and positioned to the left. At full size it looks fine, but when you adjust the screen size it loses its positioning. How can I make it responsive so when I adjust the screen size it stays with the "Create" texts in front of it?Example, I want to make it look like this site where the image is positioned behind the text.
#home_nav {
background-color: #5680E9;
}
a{
color:#ffffff;
}
.btn{color:#ffffff;}
.img-fluid {
max-width: 80%;
max-height: 80%;
}
.text-right {
position: absolute;
bottom: 0px;
right: 16px;
}
<!--Where the buttons are located-->
<div class="container-fluid" id="home_nav">
<div class="row">
<div class="col">
<div style="position:relative;">
<img src="/STEMuli_Website/img/pen.png" alt="Pen" style="width:40%;position:absolute; left:-20px; bottom:-100px"></img></div>
<button type="button" class="btn btn-link" data-toggle="modal" data-target="#exampleModal"><div class="display-2 home_text text-right ">Create</div></button>
</div>
<div class="col">
<div class="display-2 home_text">Explore</div>
</div>
<div class="display-2 home_text">Your Library</div>
</div>
<!--RSS feed here-->
<div class="col-8">
<div class="feedgrabbr_widget" id="fgid_15f3fc7e5ddb0c39637a55949"></div>
<script>
if (typeof(fg_widgets) === "undefined") fg_widgets = new Array();
fg_widgets.push("fgid_15f3fc7e5ddb0c39637a55949");
</script>
<script async src="https://www.feedgrabbr.com/widget/fgwidget.js"></script>
</div>
</div>

Answer 1

The site you're using uses the property z-index. Basically it positions html elements in 3-d. elements with higher z-indices are on top of ones with lower z-indices. Note in my example how the blue div is completely on top of the red div. change the z-index to toggle that.
.one{
position:absolute;
top:0;
left:0;
width:200px;
height:200px;
background-color:blue;
z-index:20;
}
.two{
position:absolute;
top:0;
left:0;
width:100px;
height:100px;
background-color:red;
z-index:10;
}
<div class="one">
some content goes here.
</div>
<div class="two">
some content goes here.
</div>
Here is a fiddle.