Question

我正在尝试将div移动到我想要的确切位置（以像素为单位）（坐标应该相对于父级的div）。

我试着写这个：

<body>
    <div id="desk" style="position: absolute; width:400; height:400; background-color:blue;" >
        <div id="cell1" style="position: absolute; left: 51px; top: 1px; width: 48px; height: 48px; color:black; background-color:black;" />
        <div id="cell2" style="position: absolute; left: 1px; top: 51px; width: 48px; height: 48px; color:black; background-color:black;" />
    </div>
</body>

这是（51,1）和（1,51）坐标中的两个正方形。

我期望得到这个：

expected

但得到了这个：

enter image description here

为什么呢？我做错了什么以及如何做好？

P.S。 'fixed'代替'absolute'将完成这项工作，但是square不是位于父div之下，并且不响应滚动。有没有办法解决它？

Answer 1

您将结束标记从div中删除，因此cell2位于cell1内，因此相对于cell1而非desk的边缘定位。

您无法在HTML中使用XML自动关闭标记语法。

Answer 2

您需要正确关闭DIV代码：

<body>
    <div id="desk" style="position: absolute; width:400; height:400; background-color:blue;" >
        <div id="cell1" style="position: absolute; left: 51px; top: 1px; width: 48px; height: 48px; color:black; background-color:black;"></div>
        <div id="cell2" style="position: absolute; left: 1px; top: 51px; width: 48px; height: 48px; color:black; background-color:black;"></div>
    </div>
</body>

Example fiddle

Answer 3

这对我有用：

<div id="desk" style="position: relative; width:400px; height:400px; background-color:blue;" >
    <div id="cell1" style="position: absolute; left: 51px; top: 1px; width: 48px; height: 48px; color:black; background-color:black;"></div>
    <div id="cell2" style="position: absolute; left: 1px; top: 51px; width: 48px; height: 48px; color:black; background-color:black;" ></div>
</div>

关闭<div>个标签。它认为，第二个div是第一个孩子。
在width:400px; height:400px;

Answer 4

这是一个小提琴：http://jsfiddle.net/GvQ3x/

关闭div（<div></div>而不是<div />）标记，当您想设置容器div大小时，也可以使用px（或其他任何内容）

如何将div定位在绝对位置？

4 个答案: