如何定位图像，使其与背景图像重叠

Question

我需要javascript吗？或html css就足够了，如果是这样，我应该使用位置或属性来做这件事吗？

如果我没有清楚地描述，那么图片可能有助于演示

Answer 1

在顶部div上使用position relative，在img上使用Position absolute

DEMO:

MARKUP：

<section>
    <article>
        <figure></figure>
    </article>
    <article></article>
</section>

型：

*{box-sizing:border-box; padding: 0; margin:0;}
section{
    width:480px;
    border:2px solid #ccc;
    margin:0 auto;
    padding: 20px 0;
}

article{
   min-height:320px;
    width:100%;
    display:block;
    clear:both;
    border-bottom:2px solid #ccc;
    position:relative;
}
figure{
    position:absolute;
    bottom:-40px;
    right:10px;
    width:80px;
    height:80px; 
    background:#ccc;
}

Answer 2

进一步展示kougiland的观点，这是一个有你想要的小提琴：

.header{
   height: 200px;
   width: 100%;
   background: #000;
   position: relative;
}

.image{
   height: 100px;
   width: 100px;
   background: red;
   position: absolute;
   right: 50px;
   bottom: -50px;
}

JSFIDDLE