---
，我们来看一个最简单的例子。假设我们有一个父容器，其中包含一个子元素，我们想要将子元素的顶部边与父容器的顶部边对齐。我们可以通过设置<div top>属性为0来实现这个效果。
.parent {position: relative;height: 200px;background-color: lightgray;}<br>.child {position: absolute;top: <span >0</span>;background-color: crimson;width: 100px;height: 100px;}在上面的代码中，我们设置了父容器的高度为200px，背景颜色为lightgray。然后，我们设置子元素的定位方式为absolute，<div top>的值为0，也就是将子元素的顶部边与父容器的顶部边对齐。子元素的背景颜色为crimson，宽度为100px，高度为100px。
接下来，我们来看一个更复杂一些的例子。假设我们有一个父容器，其中包含多个子元素，我们想要将某个子元素的顶部边相对于父容器的顶部边进行偏移。我们可以通过设置<div top>属性为一个非零值来实现这个效果。
.parent {position: relative;height: 200px;background-color: lightgray;}<br>.child {position: absolute;top: <span >50px</span>;background-color: crimson;width: 100px;height: 100px;}<br>.another-child {position: absolute;top: <span >0</span>;background-color: forestgreen;width: 100px;height: 100px;}在上面的代码中，我们在父容器中创建了两个子元素。，我们设置了父容器的高度为200px，背景颜色为lightgray。然后，我们分别设置了两个子元素的定位方式为absolute。其中，一个子元素的<div top>属性的值为50px，即将其顶部边相对于父容器的顶部边向下偏移了50px。另一个子元素的<div top>属性的值为0，也就是将其顶部边与父容器的顶部边对齐。两个子元素的背景颜色分别为crimson和forestgreen，宽度和高度都为100px。
<div top>除了可以接受一个固定的数值作为偏移量外，还可以接受百分比作为偏移量。下面来看一个例子，我们可以使用百分比值来实现与父容器顶部边的相对定位。
.parent {position: relative;height: 200px;background-color: lightgray;}<br>.child {position: absolute;top: <span >50%</span>;background-color: crimson;width: 100px;height: 100px;}在上面的代码中，我们仍然设置了父容器的高度为200px，背景颜色为lightgray。然后，我们设置子元素的定位方式为absolute，<div top>的值为50%。这样，子元素的顶部边就会相对于父容器的顶部边向下偏移其高度的一半。子元素的背景颜色为crimson，宽度为100px，高度为100px。
综上所述，<div top>属性在CSS中是一个非常实用的属性，用于设置元素相对于其定位的父元素的顶部边的偏移量。我们可以通过指定具体的数值或百分比值来实现不同的效果。通过灵活运用<div top>属性，我们可以轻松控制元素在垂直方向上的位置，实现丰富多样的布局效果。
