将图像定位在100vh的盒子中

Question

我一直在寻找一段时间，但找不到解决方案。 所以我正在研究具有不同部分的个人投资组合（height: 100vh;）。我遇到的问题是我无法将图像放置在部分本身中（我希望pinguïns的图像像第一个狮子图像一样定位。但在下面的部分中。）。有人可以帮我弄这个吗？ （我正在使用引导网格）

代码：

.section-1 {
  background: radial-gradient(#2d2d2d, #1a1a1a);
  height: 100vh;
}

.section-2 {
  background: #fc6621;
  height: 100vh;
}

.section-3 {
  background: #20468b;
  height: 100vh;
}

.col-sm-6 {
  height: 100vh;
}

#profile img {
  display: inline;
  float: right;
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 0;
}

.center {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.text {
  height: 100vh;
  position: relative;
  z-index: 10;
}

<!-- 1st section -->
  <div class="section-1">
    <div id="profile"><img src="https://i.gyazo.com/4cefd23a7fdc59ac022cc46d44fe9321.jpg" width="1006" height="821"></div>
    <div class="container">
      <div class="row">
        <div class="col-sm-6 center text">
          <h1>I'm <strong>Gilles</strong></h1>
          <p>Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nullam id dolor id nibh ultricies vehicula ut id elit. Vestibulum id ligula porta felis euismod semper. Maecenas sed diam eget risus varius blandit sit amet non magna. Nullam
            id dolor id nibh ultricies vehicula ut id elit. Donec sed odio dui. Cras mattis consectetur purus sit amet fermentum.</p>
          <div class="col-sm-4 button"><a href="index.html">CONTACT ME</a></div>
        </div>
      </div>
    </div>
  </div>
  <!-- 2nd section -->
  <div class="section-2">
    <div id="smartschool"><img src="https://i.gyazo.com/abdeb771b58043c53cfb08e5ffd42f6e.jpg" width="990" height="753"></div>
    <div class="container">
      <div class="row">
        <div class="col-sm-6 center text">
          <h1>I'm <strong>Gilles</strong></h1>
          <p>Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nullam id dolor id nibh ultricies vehicula ut id elit. Vestibulum id ligula porta felis euismod semper. Maecenas sed diam eget risus varius blandit sit amet non magna. Nullam
            id dolor id nibh ultricies vehicula ut id elit. Donec sed odio dui. Cras mattis consectetur purus sit amet fermentum.</p>
          <div class="col-sm-4 button"><a href="index.html">READ MORE</a></div>
        </div>
      </div>
    </div>
  </div>
  <!-- 3th section -->
  <div class="section-3">
    <div id="dutchcreativestudio"><img src="https://i.gyazo.com/4cefd23a7fdc59ac022cc46d44fe9321.jpg" width="933" height="643"></div>
    <div class="container">
      <div class="row">
        <div class="col-sm-6 center text">
          <h1>I'm <strong>Gilles</strong></h1>
          <p>Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nullam id dolor id nibh ultricies vehicula ut id elit. Vestibulum id ligula porta felis euismod semper. Maecenas sed diam eget risus varius blandit sit amet non magna. Nullam
            id dolor id nibh ultricies vehicula ut id elit. Donec sed odio dui. Cras mattis consectetur purus sit amet fermentum.</p>
          <div class="col-sm-4 button"><a href="index.html">READ MORE</a></div>
        </div>
      </div>
    </div>
  </div>

第一个做对了！

然后它变得一团糟（或者它们叠加在彼此之上）

Answer 1

position: absolute;相对于最近的父亲。如果没有父母有一个固定的位置，它将相对于body，这似乎是在这里发生的。

所以每个100vh部分都需要position: relative;

还值得注意的是float对具有绝对定位的元素不做任何事情，因为position: absolute;将元素从文档流中取出。