如何相对于父 div 定位叠加层？

Question

我正在尝试在图像中放置几个​​包含一些文本的叠加层。但是，当我调整浏览器的大小时，“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;
}

Answer 1

CSS 属性left: X px; 改成position: absolute 将您的 div 放置在窗口左侧，偏移 X px。您需要从窗口的右侧偏移。所以尽管left 还是要使用right

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

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