Using css' z-index - html

Question

I am trying to figure out how to position a header text behind a button and when I change the z-index and the top and left attributes it doesn't change as expected. The end goal is to position that header anywhere within the col I created for the button. When I change the top and left values the text doesn't move at all.
h1{
position:relative;
top:0;
left:0;
width:0px;
height:0px;
z-index:0;
}
#home_nav {
background-color: #5680E9;
}
a{
color:#ffffff;
}
<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"></div>-->
<div class="col">
<h1>Help?</h1>
</div>
<div class="col">
<button type="button" class="btn btn-link" data-toggle="modal" data-target="#exampleModal"><div class="display-2 text-right ">Create
</div>
</button>
</div>
</div>
<div class="w-100">
<div class="col">
<div class="display-2">
Explore
</div>
</div>
</div>
<div class="w-100">
<div class="col">
<div class="display-2">Your Library
</div>
</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>
</div>

Answer 1

add a class to the element.
.myfunbutton{z-index:10;position:relative;}
<div class="col myfunbutton ">
<button t
might be better ways...

Answer 2

For total control, change relative to absolute in your h1 .