0

我试图将一些 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应该彼此放置，但它们是在彼此下方绘制的，如果我设置它们是相互放置的，但它们不是根据它们的容器而是根据屏幕定位的.topleftposition: absolute;

有没有办法根据容器将 div 放置在彼此之上？

4

3 回答 3

1

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

css技巧：相对位置和绝对位置

简而言之：

容器元素得到position: relative;

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

这允许您控制定位并且它是跨浏览器兼容的（旧版本的 IE 以可怕的方式处理定位！）

PS 一些通用的建议来提高你的编码技能：

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

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

于 2012-10-21T09:34:29.397 回答
0

用于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>
于 2012-10-21T09:34:39.157 回答
0

您需要使用相对定位的父级并绝对定位 div：请参见我的 js fiddle：

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;
}
于 2012-10-21T09:50:56.390 回答