Question

我正试图将这张笔的照片放在＆＃34;创建＆＃34;文字并位于左侧。全尺寸它看起来很好，但是当你调整屏幕尺寸时，它会失去定位。如何使其响应，以便在我调整屏幕尺寸时保持＆＃34;创建＆＃34;在它前面的文字？Example，我想让它看起来像这个图像位于文本后面的网站。

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

Answer 1

您使用的网站使用属性z-index。基本上它将html元素定位在3-d中。具有较高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.

定位图像并保持文本流畅

1 个答案: