0

我正在尝试定位几个在图像中包含一些文本的叠加层。但是，当我调整浏览器的大小时，“creditText”不会保持原位。我希望它位于图像的右上角。

这是我迄今为止在 JSFiddle 中所做的：http: //jsfiddle.net/sqJtr/109/

HTML：

<div class="bkgrndImgExecClub">
    <div class="frameContent backgroundBox basic">
        <p>Passar pelo aeroporto com rapidez utilizando o aplicativo da British Airways</p>             
    </div>
    <div class="creditText">
        <p>Foto por michael Chudakov Club member desde 2003</p>
    </div>          
</div>

CSS：

   body{
    font-family: Arial,Verdana,sans-serif;
}

.frameContent {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
    left: 30px;
    top: 50px;
    word-wrap: break-word;
    position: absolute;
    width: 250px;
    padding-left: 12px;
    transition: background 0.15s ease-in-out 0s;
}

.bkgrndImgExecClub {
    background-image: url(TIM_BANNERS_BLUE_LATAM_PT_TEST-IMAGE_1.jpg);
    background-repeat: no-repeat;

    height: 180px;
    position: relative;
}

.frameContent p {
    color: #FFFFFF;
    text-decoration: none;
    text-shadow: 1px 1px 2px #000000;
    font-weight:bold;
}

.creditText
{
    right:59px;
    top: 10px;
    word-wrap: break-word;
    position: absolute;
    width: 200px;
    text-align:right;
}

.creditText p
{
    font-size: 0.80em;
    font-weight: bold;
}
4

1 回答 1

1

版本中的CSS 属性left: X px;，用于position: absolute将您的 div 放置在窗口左侧，偏移量为 X px。您需要从窗口的右侧偏移。所以right尽管使用left 

.creditText
    {
        right: 0;
        top: 10px;
        word-wrap: break-word;
        position: absolute;
        width: 200px;
        text-align:right;
    }

演示：http: //jsfiddle.net/sqJtr/116/

于 2013-10-14T14:33:57.903 回答