Question

I am using the 960 gs for the layout and have two columns, grid_7 each with prefix and suffix 1 (using 16 grids).

Now, I want to place two images one behind the other, in both columns.

Here’s what I have so far: http://jsbin.com/ivajit/3 .. and it’s edit page – http://jsbin.com/ivajit/3/edit

(in the edit page, you can close the js panel as I am not using it, so the html / render page is clear)

Now, my rays don’t align exactly in center with my violin image (or is it cello? it doesn’t matter)

so I add, in css

left: 20px;

and both the rays images fall to far left of browser, like so: http://jsbin.com/ivajit/2 .. and it’s edit page – http://jsbin.com/ivajit/2/edit

I thought absolute positioning the ray would make it relative to it’s parent so it would fall back to 20px of it’s parent left.. but apparently it’s not the case..

And I have tried other positions too, relative, fixed.. nothing works the way I want..

How do I put the rays behind my violin in each column please?

Answer 1

Positioning something absolutely will position it absolutely in relation to the page. The solution to your problem is wrap the position absolute elements in a div with position:relative.

The items position absolutely inside this element then use the position from the parent as its 0 point.