Using css' z-index

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">
              <a href="/STEMuli_Website/HTML_Pages/Explore.html">Explore</a>
            </div>
          </div>
        </div>
        <div class="w-100">
          <div class="col">
            <div class="display-2"><a href="#">Your Library</a>
            </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>

https://stackoverflow.com/questions/20721248/best-way-to-override-bootstrap-css — Julian Espinosa, Jan 23 '18 at 21:27

score 0 · Answer 1 · answered Jan 23 '18 at 22:00

0

add a class to the element.

.myfunbutton{z-index:10;position:relative;}

<div class="col myfunbutton ">
        <button t

might be better ways...

answered Jan 23 '18 at 22:00

Mark Schultheiss

32,614
12
69
100

VorganHaze · Answer 2 · 2018-01-29T22:28:21.017

0

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

edited Jan 29 '18 at 22:28

answered Jan 24 '18 at 02:40

VorganHaze

1,887
1
12
35

Using css' z-index

2 Answers2