在其父级上方设置图片

Question

我有一个网站页脚和房子的图片。 所以我的目标是在照片上面设置房屋的图片。 现在我的结构看起来像这样：

<div class="footer">
     <img class="homes" src="img/homes.png" > 
</div>

那么应该在我的css文件中写什么来设置比我的页脚更高的房屋图片

.footer {
        background: rgb(59, 59, 59);
    }


.homes {
}

Answer 1

你应该使用粘性页脚并在里面添加你的房子。它们是页脚的元素。现在，使用否定margin-top将其推送到现场。

.footer .home {
    height: 100px;
    width: 100px;
    background: red;
    position: absolute;
    margin-top: -100px; // here we go
    margin-left: 42px;
}

<强> Demo JSFiddle

Answer 2

Click here for demo

的CS

.footer {
    background: rgb(59, 59, 59);
    margin-top:30px;   
}

.homes {
    margin-top:-30px;       
}

HTML

<div class="footer">
    <img class="homes" src="http://placehold.it/250x100" /> 
</div>