将两个相对定位的div堆叠在彼此的顶部

Question

我有两个div，我想使用相对定位彼此重叠。

<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> 

我试图堆叠它们，并使用相对定位，因为我想要div位置与背景图像进行调整。

下面是我使用的CSS：

$('#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

你可以试着改变位置绝对和添加的包装用相对位置来。 看到这个例子： http://jsfiddle.net/fKmYN/19/ Greetings，Gijoey