Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

image positions not working

image positions not working

Problem

I can't seem to get boxclosed1.png to stay in the same spot if i re-size the browser. does anyone have any ideas? i'm testing in chrome. I tried to follow what was posted at this link: CSS: position absolute fails in resizing

EDIT: so i tried taking out all the other items (grass etc) and then it seems to be Positioned correctly. in this case, what do i need to change about my current setup in divs and styles to make this work together?

Code:

html






    
    
        
Malmö
Problem courtesy of: BlackSky

Solution

If you place boxclosed1.png with position: absolute inside a

relatively positioned, then the image will be still absolutely positioned in relation to its parent, which will move if the browser is resized ... so does the image.

Move the image out of any container (before the

closing tag) and give it a position: fixed AND set its position in relation to the bottom and right of the page like

.fixed { position: fixed; bottom: 20px; right: 20px; }

Check (and resize) fiddle

BTW, I wouldn't set width or height neither position to the html tag in order to avoid unexpected cross-browser results (unless you know exactly what you are doing)

Solution courtesy of: JFK

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

image positions not working

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×