css - 定位图像并与文本保持流​​畅

Question

我正在尝试将其放置在这张笔图片位于“创建”文本后面并位于左侧的位置。在全尺寸下它看起来不错，但是当你调整屏幕尺寸时它会失去定位。我怎样才能让它响应，所以当我调整屏幕大小时它保持在它前面的“创建”文本？ Example ，我想让它看起来像图像位于文本后面的网站。

#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。基本上它在 3-d 中定位 html 元素。具有较高 z 索引的元素位于具有较低 z 索引的元素之上。请注意在我的示例中，蓝色 div 是如何完全位于红色 div 之上的。更改 z-index 以切换它。

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