如何定位相對於父div的覆蓋圖？

我試圖在圖像中放置幾個包含一些文本的疊加層。但是，當我調整瀏覽器的大小時，「creditText」不能保持原樣。我希望它位於圖像的右上角。如何定位相對於父div的覆蓋圖？

下面是我在的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; 
}

來源

2013-10-14 Johnathan Au

CSS屬性left: X px;到position: absolute地方你的分度，X px偏移到窗口的左側。您需要從窗口右側偏移。因此，使用right儘管left

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

的DEMO：http://jsfiddle.net/sqJtr/116/

來源

2013-10-14 14:33:57

正要回答同一個。（Y） –

同時告訴他爲什麼他應該使用'right'而不是'left'。 –

@MohammadAreebSiddiqui對不起，我發佈時沒有看到你的答案。好的，我立即編輯我的答案 –

如何定位相對於父div的覆蓋圖？

回答

相關問題