Не удается разместить изображение с абсолютным позиционированием в левом нижнем углу - PullRequest
Новая
       55

Не удается разместить изображение с абсолютным позиционированием в левом нижнем углу

0 голосов
/ 06 апреля 2020

Мне нужно поместить фоновое изображение в крайнем левом нижнем углу страницы (используя position: absolute), но вместо этого изображение продолжает показываться выше нижнего.

Вот так должен выглядеть левый нижний угол: https://i.ibb.co/d5RkRdX/desktop-design-monthly2.jpg Вот так он выглядит вместо этого: https://i.ibb.co/3r3jvBr/image.png

Вот некоторые моего HTML и CSS кода - соответствующий элемент имеет класс "bg-bottom": 

<div class="row" id="pricing">

  <div class="card">
    <h2 class="card-title">Basic</h2>
    <h1 class="row price-title">
      <span>$</span>
      <span class="price basic">19.99</span>
    </h1>
    <hr class="seperator" />
    <p class="text">500 GB Storage</p>
    <hr class="seperator" />
    <p class="text">2 Users Allowed</p>
    <hr class="seperator" />
    <p class="text">Send up to 3 GB</p>
    <hr class="seperator" />
    <button class="btn">LEARN MORE</button>
  </div>

  <div class="card card-middle">
    <h2 class="card-title">Professional</h2>
    <h1 class="row price-title">
      <span>$</span>
      <span class="price professional">24.99</span>
    </h1>
    <hr class="seperator" />
    <p class="text">1 TB Storage</p>
    <hr class="seperator" />
    <p class="text">5 Users Allowed</p>
    <hr class="seperator" />
    <p class="text">Send up to 10 GB</p>
    <hr class="seperator" />
    <button class="btn">LEARN MORE</button>
  </div>

  <div class="card">
    <h2 class="card-title">Master</h2>
    <h1 class="row price-title">
      <span>$</span>
      <span class="price master">39.99</span>
    </h1>
    <hr class="seperator" />
    <p class="text">2 TB Storage</p>
    <hr class="seperator" />
    <p class="text">10 Users Allowed</p>
    <hr class="seperator" />
    <p class="text">Send up to 20 GB</p>
    <hr class="seperator" />
    <button class="btn">LEARN MORE</button>
  </div>

</div>

<img class="bg-bottom" src="images/bg-bottom.svg" alt="bottom background" />

.bg-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: -1;
  width: 20%;
}
...