html - 如何使 Logo 出现在背景图片上？

Question

我正在尝试将 Logo 置于背景图片之上。

我注意到设置一个 float 使其覆盖图像，但它不在我想要的位置。我将 Logo 设置在带有引导行类的单独 div 上(这可能是原因它正在干预。我该怎么办？

<section>
  <div class="row">
    <img src="images/pdlogo.png" alt="logo" height="130px" class="logo">
  </div>
  <div id="formulario" class="col-sm-6 form animated bounceInUp">
    <h1> Ingresa Aqui!</h1>
    <form>
      <div class="formcontainer">
        <label for="nombre">Nombre </label>
        <input type="text" required id="nombre" name="nombre" placeholder="Hugo">
        <label for="apellido">Apellido</label>
        <input type="text" required id="apellido" name="apellido" placeholder="Sanchez">
        <label for="email">Correo Electronico</label>
        <input type="email" required id="email" name="email" placeholder="hugosanchez@gmail.com">
        <label for="telefono">Numero de Telefono</label>
        <input type="tel" required id="telefono" name="telefono" placeholder="78126177">
        <label for="codigo">Codigo de Compra</label>
        <input type="text" required id="codigo" name="codigo" placeholder="PD78907">
        <input type="submit" id="submit" value="Enviar">
      </div>
    </form>
  </div>
  <div class="col-sm-6 info">
    <h1> 2 Pasajes Gratis</h1>
    <h2>en 2 pasos simples...</h2>
    <h3>(<span>1</span>) Realiza compras en PatioDesign y guarda tus recibos (contienen el codigo especial) </h3>
    <h3>(2) Ingresa a la seccion "Registros" y llena el formulario</h3>
    <h5>La rifa cierra el Marzo 30, 2019 a las 7:00PM</h5>
    <h5>Resultados se enviaran el día siguiente por mail y se anunciaron en esta misma pagina</h5>
  </div>
</section>

Answer 1

欢迎来到 stackoverflow Sofia!

你可以使用position: relative; z-index: 2。当对象的位置设置为 relative 时，它​​成为一个有序的层列表。通过传递 z-index: 2，你告诉它在有序层中，我希望它位于元素 1 和元素 3 之间。确保你的背景的 z-index 小于你的 Logo 才能工作。