使用负块div响应设计在div中进行图像定位

Question

我不确定如何解释我需要做什么，虽然我已经通过论坛寻找答案，但我找不到具体的解决方案。

我有一张图片，我想要放置在蓝色100％宽度的面板div元素背景之上。我已经尝试将图像定位为绝对和浮动。浮动更有效，但当我放置负边距时，我不能让它升到蓝框之上。它在蓝色面板下。

蓝色bg的宽度为100％，当屏幕变小时，文本应浮动图像。绿色和橙色矩形是一个图像。

这是我到目前为止的html代码，但是仍然遇到困难，无论是放置图像还是将文本放在右边环绕它，或者，我可以包装文本但图像不会位于蓝色bg之上。这适用于移动网站。任何想法都将不胜感激。

这里是图片 - traceyower.co.nz/intended-layout.jpg。

蓝色bg的宽度为100％，当屏幕变小时，文本应浮动图像。绿色和橙色矩形是一个图像。 -

HTML：

<div class="gap-box-row">
    <div id="gap-imggroup">
        <img src="..." alt="" />
    </div>
    <div class="gap-box1">
        <p class="text1">Collect your FREE ....etc</p>
        <p class="text2"> <a href="..." title="...">Get BOTH</a> or just <a href="..." title="...">Grab a FREE</a><span><img style="float:right; width:32px; height:41px;" src="..." />
        </p>
    </div>
    <!-- end gap-box1 -->
</div>
<!-- end box-row -->

CSS：

.gap-box-row {
    width:100%;
    float:left;
    position:relative;
    padding:0;
    margin: 0 0 1em 0;
    clear:both;
}
#gap-imggroup {
    position:absolute;
    width:278px;
    height:280px;
    margin-left:0;
    margin-top:-75px;
    margin-right:10px;
    left:0;
    top:0%;
    z-index: 10;!important
}
.gap-box1,
.gap-box2,
.gap-box3 {
    float:left;
    position:relative;
    padding:0;
    margin: 0;
    overflow:hidden;
    border: 1px solid #390;
    -webkit-box-shadow: 2px 2px 2px #000000;
    -moz-box-shadow: 2px 2px 2px #000000;
    -o-box-shadow: 2px 2px 2px #000000;
    -ms-box-shadow: 2px 2px 2px #000000;
    box-shadow: 2px 2px 2px #000000;

}
.gap-box1 {
    min-height:278px;
    width:100%;
    float:left;
    background-color: #0099cc; 
}

.gap-box1 p.text1{
    font: 2em/1.5em normal arial, sans-serif;
    padding:.5em;
    color:#fff;
    margin-bottom:1em;
    text-align:left;
}