Question

我试图弄清楚如何将标题文本放在按钮后面，当我更改z-index和顶部和左侧属性时，它不会按预期更改。最终目标是将标题放在我为按钮创建的col中的任何位置。当我更改顶部和左侧值时，文本根本不会移动。

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>

Answer 1

为元素添加一个类。

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

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

可能是更好的方式......

Answer 2

要获得完全控制权，请在relative中将absolute更改为h1。

使用css'z-index

2 个答案: