Question

I have two divs I’d like to position on top of each other using relative positioning.

<div id="display_background">
</div>
<div id="display_foreground">
    <div id="home">
        This is the home page
    </div>

    <div id="info">
        This is the info page
    </div>

    <div id="contact">
        This is the contact page
    </div>
</div>

I’m trying to stack them, and am using relative positioning because I want the div positions to adjust with the background image.

Here’s the css I’m using:

$('#display_background').css({
    'background-color': 'white',
    opacity: 0.5,
    position: 'relative',
    left: '66%',
    top: '66%',
    width: '425px',
    height: '330px',
    border: '1px solid'
});
$('#display_foreground').css({
    position: 'relative',
    left: '66%',
    top: '66%',
    width: '20%',
    height: '25%'
});

Answer 1

You can try to change the position to absolute and add a wrapper with a relative position.
See this example:
http://jsfiddle.net/fKmYN/19/
Greetings, Gijoey