html - 对齐绝对定位的div

Question

我有一个包装 div (#main-wrapper) 和一个在内部水平居中的 div (#image)。它包含一个大图像。

我想要一个 div 覆盖右下角的#image (#thumbs)。

这是我所拥有的:

<div id="main-wrapper">
    <div id="image">
        <img src="img.jpg" />
    </div>
    <div id="thumbs">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
   </div>
</div>

div#main-wrapper
{
    width: 100%;
    background-color: #000000;
    position: relative;
}

div#main-wrapper div#image
{
    margin: 0 auto;
    width: 800px;
    height: 600px;
    background-color: #1D9DDD;
}

div#main-wrapper div#thumbs
{
    position: absolute;
    width: 600px;
    height: 400px;
    background-color: #FF212C;
    bottom: 0;
    right: 0;
}

问题是#thumbs 转到了#main-wrapper 的右下角，而不是居中的 div 的中心。

你可以在这里看到我在做什么:http://jsfiddle.net/22NnS/1/

Answer 1

如果我理解正确，那么这将起作用。像这样将 thumbs div 放在图像容器中:

<div id="main-wrapper">
    <div id="image">
        <img src="img.jpg" />
        <div id="thumbs">
            <a href="#">Link 1</a>
            <a href="#">Link 2</a>
            <a href="#">Link 3</a>
        </div>
    </div>

</div>

然后改变position:relative定义的地方:

div#main-wrapper
{
    width: 100%;
    background-color: #000000;
}

div#main-wrapper div#image
{
    margin: 0 auto;
    width: 800px;
    height: 600px;
    background-color: #1D9DDD;
    position: relative;
}

div#main-wrapper div#thumbs
{
    position: absolute;
    width: 600px;
    height: 400px;
    background-color: #FF212C;
    bottom: 0;
    right: 0;
}