Как наложить картинку на блок?

#html #css #html5 #css3

У меня есть блок и есть картинка. Как наложить одно на другое?



 #box {
     width: 100%;
     height: 150px;
     background-color: #15B575;
     }

    #logo {
     margin-top: 50px;
    }
  

      

      
    




Не понимаю как поднять картинку.
    

Ответы

Ответ 1

#box {
 width: 100%;
 height: 150px;
 background-color: #15B575;
 }

#logo {
 margin-top: 50px;
  position: absolute;
  top:0;
  left:0;
  right:0;
  bottom: 0;
  z-index: 2;
}
header {
position: relative;
}

  

  



Ответ 2

Самым простым и наиболее сопроводжаемым решением будет вложить картинку в блок и
задать блоку position: relative;, а картинке position: absolute;.

Далее смещать картинку с помощью CSS-свойств left, right, top, bottom от соответствующей
стороны блока в нужных вам единицах измерения.



#box {
  position: absolute;

  /* Просто для демонстрации */
  width: 300px;
  height: 200px;
  background-color: #ccc;
}

#logo {
  position: relative;

  /* Просто для демонстрации */
  left: 30px;
  top: 20px;
  right: 40px;
}

  



Ответ 3

Попробуйте использовать отрицательное значение свойства margin-top, например:

#logo {
    display: block;
    margin-top: -50px;
}


Хотя, судя по названию блоков, правильнее разместить картинку с логотипов внутри
контейнера с id box.