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/ 问候，Gijoey