Question

我要做的是：

enter image description here

我做了什么

jsfiddle： http://jsfiddle.net/eyyo/gUuVn/1/

<div style="left: 0; top: 0;">
    <img src="images/tit_fondo1.jpg" style="position: relative ; z-index: 1;"/>
    <img src="images/tit_fondo2.jpg" style="position: absolute ; z-index: 1;"/>
    <img src="images/tit_titulo.png" style="position: relative ; z-index: 2;"/>


    <div style="text-align:center; margin-left: auto ;margin-right: auto ;width:80%;">
        <p style="color:#755C48; font:italic 10px arial;position: relative ; z-index:
         2;">“Paragraph with a shor text of two or three lines”</p>
    </div>
</div>

这个问题是img C无法在img A之上。

Answer 1

试试这个：

http://jsfiddle.net/gUuVn/3/

 <div style="left: 0; top: 0;position: relative;">
        <img src="http://s22.postimg.org/o27ibahxd/tit_fondo1.jpg" style="position: relative ; z-index: 1;"/>
     <br/>  <img src="http://s16.postimg.org/8ysqmfif9/tit_fondo2.jpg" style="position: relative ; z-index: 1;"/>
        <img src="http://s10.postimg.org/xt62u60dh/intro_bandera1.png" style="position: relative ; z-index: 2;position: absolute;left:0;top:0;"/>


        <div style="position: absolute;bottom: -2px;left: 0;margin-left: auto ;margin-right: auto ;width:80%;">
            <p style="color:#755C48; font:italic 10px arial;position: relative ; z-index:
             2;">“Paragraph with a shor text of two or three lines”</p>
        </div>
    </div>

Answer 2

以下是这个有效代码的小提琴：http://jsfiddle.net/gUuVn/5/

首先，您需要添加一个带有position: relative的“wrap”div来包含整个组。这允许我们绝对定位相对于包含元素的元素，而不是整个文档。

有关此内容的更多信息：http://css-tricks.com/absolute-positioning-inside-relative-positioning/

然后我们用div包装图像C.这使我们可以绝对定位图像，同时仍允许我们居中。如果我们绝对定位图像，我们将无法再将图像居中。

一旦我们绝对定位了wrap元素，我们就会使用margin: 0 auto;将图像置于该元素的中心。

图片C周围的附加标记：

<div class="c-wrap">
    <img src="http://s10.postimg.org/xt62u60dh/intro_bandera1.png"  class="c" />
</div>

<强> CSS：

.wrap {
    position: relative;    
}
.c-wrap {
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 2;
}
.c {
    margin: 0 auto;
    display: block;
}

Answer 3

这个问题有jQuery标记，因此我在我的答案提案中使用了它：

我没有时间完成这个（文本），因为我在工作休息时这样做了，但我让你开始做某事。小提琴：http://jsfiddle.net/YgbLX/

HTML：

 <div id ="a" class="background">
    <img id="b" src="http://s16.postimg.org/8ysqmfif9/tit_fondo2.jpg" style="position: absolute;"/>
    <img id="c" src="http://s10.postimg.org/xt62u60dh/intro_bandera1.png" style="position: absolute;"/>

     <p style="position: absolute; color:#755C48; font:italic 10px arial;position: relative;">Paragraph with a shor text of two or three lines”</p>
</div>

CSS：

.background { 
    background-image: url(http://s22.postimg.org/o27ibahxd/tit_fondo1.jpg); 
    height: 301px;
    width: 480px;
    padding: 0px;
    margin: 0px;
}

使用Javascript：

$("#b").css("top", ($("#a").height() - $("#b").height() + 10) + "px");
$("#c").css("left",  ($("#a").width()/2 - $("#c").width()/2) + "px");

Answer 4

你需要给C一个像left: 100px或top: 100px这样的位置，例如

CSS定位：设置为下面的图像和第一个图像顶部的1个图像（包括jsfiddle）

4 个答案: