定位图像，保持文字流畅

Question

我试图使它的这张图片的钢笔是在后面的“创建”文本，并定位在左边。在全尺寸时，它看起来很好，但是当您调整屏幕大小时，它就失去了它的位置。我如何使它的响应，所以当我调整屏幕大小，它停留在它前面的“创建”文本？示例，我想让它看起来像这个网站的图像是定位在文本后面。

​

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

您使用的站点使用属性z-index。基本上，它将html元素放置在3d中。Z指数较高的元素在z指数较低的元素之上.注意，在我的示例中，蓝色div完全位于红色div的顶部。更改z索引以切换这一点。

.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>

这是一把小提琴。