CSS定位相对于Div的角落

Question

CSS定位相对于Div的角落

5

我在一个大div中有多个小div。是否可以将所有这些小div相对于父div的左上角进行定位？这将使某些任务的定位更加容易，因为所有内部div的坐标都是相对于同一参考点的。目前使用position: relative只会将其位置从原来的位置偏移，而不受position: relative影响。

- Nyxynyxx

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- jfriend00 · Accepted Answer

将父/包含的div设置为position:relative。然后，将子div设置为position:absolute。子元素将被绝对定位，但相对于包含的div而不是整个页面。

这是一个示例：http://jsfiddle.net/jfriend00/GgNsH/。

HTML：

<div id"otherStuff" style="height: 100px; background-color: #777;"></div>
<div id="container">
    <div id="child1" class="child"></div>
    <div id="child2" class="child"></div>
    <div id="child3" class="child"></div>
</div>

CSS：

#container {position: relative;}
.child {position: absolute; height: 10px; width: 10px; background-color: #777;}
#child1 {top: 10px; left: 10px}
#child2 {top: 30px; left: 30px}
#child3 {top: 50px; left: 50px}

每个子元素将从容器的左上角开始，根据其自身的top/left值进行定位。

这是因为position: absolute的工作原理。它将元素相对于第一个已定位的父元素（即一个具有relative、absolute或fixed属性值的父元素），或如果没有已定位的父元素，则以文档的左上角作为参考位置进行定位。这不是一个技巧，而是其文档指定的工作方式，并且非常有用。