javascript - 容器内的相对/绝对定位

Question

我正在尝试将一些 div 放置在另一个容器中，当我在这些 div 上设置 position: relative; 时，它们被绘制在容器内，但是当我添加 top 和 left 样式属性时，它们是'绘制正确

这是我的代码:

<table style="background:black;width:80%;height:90%;">
    <tr>
        <td style="background:yellow;width:15%">Left Pane</td>
        <td style="background:black;width:85%">
            <div id="a" style="background:green;position:relative;top:1px;left:80px;width:20%;height:20%">a</div>
            <div id="b" style="background:blue;position:relative;top:10px;left:14px;width:20%;height:20%">b</div>
            <div id="c" style="background:red;position:relative;top:10px;left:14px;width:20%;height:20%">c</div>
        </td>
    </tr>
</table>

如您所见，div #b 和 #c 应该相互放置，因为它们的 top 和 left 属性，但它们绘制在彼此下方，如果我设置 position: absolute; 它们会彼此重叠，但它们不是根据容器定位，而是根据屏幕定位。

有什么方法可以根据容器将 div 放置在彼此之上吗？

Answer 1

了解相对位置和绝对位置:

css tricks: position relative and absolute

简而言之:

容器元素获取position: relative;

其中的元素，获取position: absolute; 和top/bottom/left/right的值

这允许您控制定位并且它是跨浏览器兼容的(旧版本的 IE 以糟糕的方式处理定位!)

附上一些提高编码技能的通用建议:

• 尽量避免使用表格进行布局。

• 使用外部 css 文件而不是内联文件 - 从长远来看更容易维护并且可重用。