html - 将两个相对定位的 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/你好，吉乔伊