如何在窗口大小调整时将'table'和'div'重叠在另一个'div'中

Question

我将 table 元素和 div 元素放在一起。两者都包裹在另一个div中。

她就是一个例子：   http://jsfiddle.net/7Ge4h/

<div>
    <table id="table-inside-div">
        <tr>
            <td><div>Table inside the div</div></td>
        </tr>
        <tr>
            <td><div>Table inside the div</div></td>
        </tr>
    </table>

    <div id="div-inside-div">
        <span style="background:red">Div inside the div</span>
    </div>
</div>

当我水平调整输出窗口的大小并且桌子和div尽可能接近彼此时，div会在桌子下面但我希望它只是在桌子上方，如果它是固定位置的话。我怎么能这样做？

Answer 1

像这样：

CSS

@media screen and (max-width: 400px) {
    #div-inside-div {
        position: fixed;
    }
}

Fiddle

Answer 2

您可以向父div添加ID，并将位置设置为relative，然后将#div-inside-div设置为absolute

#main{
    position:relative;
}

#table-inside-div{
    float:left;
    background: yellow;
    width:200px;
}

#div-inside-div{
    float:right;
    width:200px;
    position:absolute;
    right:0px;
}

http://jsfiddle.net/yknKV/3/