将两个相对定位的div堆叠在一起

时间:2012-05-23 21:15:46

标签: html css

我有两个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%'
});

1 个答案:

答案 0 :(得分:1)

您可以尝试将位置更改为绝对位置并添加具有相对位置的包装。 看这个例子: http://jsfiddle.net/fKmYN/19/ 问候,Gijoey