CODEWITHSUNDEEP
csspositioncss-position
RussellHarrower
RussellHarrower

Reputation: 6810

Issue with position:absolute;

so this is what is happening, as you can see from the image below The browser screen size is making the woman cover things or move as I call it.

Here is my code

img#woman{
    position:absolute;
    bottom:100px;
    display:block;
    right:55%;
    z-index: 900;
}
#homearea{
    display:block;
    height:750px;
}

https://i.sstatic.net/BdNi7.jpgScreen Suze of Woman

I need to woman to stay in one spot she should look like this

what she should look like

Upvotes: 0

Views: 106

Answers (3)

Shailender Arora
Shailender Arora

Reputation: 7778

I think you should define postion:relative; to your Parent Div and position:absolute; to your Child Div hope this will work...... 

 img#woman{
    position:absolute;
    bottom:100px;
    display:block;
    right:55%;
    z-index: 900;
}
#homearea{
    height:750px;
    position:relative; 
}

Upvotes: 0

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32182

Hi i think you may be you used this images in background as like this

Define your Homearea id position relative and woman id give position absolute and give to background images and set to left right top bottom according to your layout

As like this

Css

#homearea{
 position:relative;

}

#woman{
width:xxx; // width of your images
height:xx; // height of your images
    position:absolute;
    bottom:100px;
    right:55%;
    z-index: 900;
background:url('../../xxx.jpg') no-repeat 0 0;
}

HTML

 <div id="homearea">
    <div id="woman"></div>
    </div>

Upvotes: 0

magzalez
magzalez

Reputation: 1406

This is without seeing your HTML:

Try setting the position on the containing div (#homearea?) to relative and then changing the directional values for the image to be relative to the top-left of the containing div.

In other words, try something like this:

img#woman{
    position:absolute;
    top:200px;
    display:block;
    left:-30px;
    z-index: 900;
}
#homearea{
    position:relative;
    display:block;
    height:750px;
}

Upvotes: 1

Related Questions