CODEWITHSUNDEEP
htmlcssoverlaycss-positionabsolute
Johnathan Au
Johnathan Au

Reputation: 5362

How can I position an overlay relative to the parent div?

I'm trying to position a couple of overlays that contain some text within in image. However, when I resize the browser the "creditText" doesn't stay in position. I want it to be on the top right of the image.

Here's what I've done so far in 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;
}

Upvotes: 0

Views: 1811

Answers (1)

Boris Zagoruiko
Boris Zagoruiko

Reputation: 13164

CSS property left: X px; in edition to position: absolute place your div with X px offset to the left of the window. You need offset from the right side of the window. So use right in spite of left 

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

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

Upvotes: 1

Related Questions