0

我正在尝试做的事情：

在此处输入图像描述

我做了什么

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”&lt;/p>
    </div>
</div>

问题在于 img C 不能位于 img A 之上。

4

4 回答 4

1

这个问题在其中标记了 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”&lt;/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");
于 2013-09-12T18:36:59.760 回答
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”&lt;/p>
        </div>
    </div>
于 2013-09-12T18:12:23.253 回答
1

这是这个工作代码的小提琴：http: //jsfiddle.net/gUuVn/5/

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

更多信息在这里：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;
}
于 2013-09-12T18:32:57.247 回答
0

您还需要给 C 一个位置left: 100px，top: 100px例如

于 2013-09-12T18:12:30.520 回答