容器内的相对/绝对位置

Question

当我设置position: relative;时，我试图将一些div放置在另一个容器中position: relative; 在这些div上，它们绘制在容器内，但是当我添加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技巧：相对位置和绝对位置

简而言之：

容器元素的position: relative;

里面的元素，获取position: absolute; 和top/bottom/left/right

这使您可以控制定位，并且它与跨浏览器兼容（旧版本的IE手柄定位非常糟糕！）

附上一些一般建议，以提高您的编码技能：

尽量避免使用表格进行布局。
使用外部CSS文件而不是内联文件-从长远来看更易于维护和重复使用。

Answer 2

使用position: relative对于容器，而position: absolute用于内部元素。

<td style="position: relative">
  <div id="a" style="position: absolute; top:1px;left:80px;width:20%;height:20%">a</div>
  <div id="b" style="position: absolute; top:10px;left:14px;width:20%;height:20%">b</div>
  <div id="c" style="position: absolute; top:10px;left:14px;width:20%;height:20%">c</div>
</td>

Answer 3

您需要使用相对定位的父级，并绝对定位div：请在此处查看我的js小提琴：

http://jsfiddle.net/benedict_w/VeL3c/

<body>
<table>
    <tr>
        <td class="left">Left Pane</td>
        <td class="right">
            <div id="a">a</div>
            <div id="b">b</div>
            <div id="c">c</div>
        </td>
    </tr>
</table>
</body>

的CSS

table {
    background:black; width:80%; height:90%;
}

td.left {
    background:yellow; width:15%;
}

td.right {
    position: relative; background:black; width:85%
}

#a, #b, #c {
    position:absolute; top:0px;
}

#a {
    background:green;left:80px; width:20%;
}

#b, #c {
    left:14px;width:20%;
    background: blue;
}

#c {
    background:red;
}

容器内的相对/绝对位置

问题描述

3 个解决方案

解决方案1
1 已采纳 2012-10-21 09:34:29

解决方案2
0 2012-10-21 09:34:39

解决方案3
0 2012-10-21 09:50:56

容器内的相对/绝对位置

问题描述

3 个解决方案

解决方案1 1 已采纳 2012-10-21 09:34:29

解决方案2 0 2012-10-21 09:34:39

解决方案3 0 2012-10-21 09:50:56

解决方案1
1 已采纳 2012-10-21 09:34:29

解决方案2
0 2012-10-21 09:34:39

解决方案3
0 2012-10-21 09:50:56