CSS中top和bottom|极客教程

CSS中top和bottom

在CSS中，top和bottom是用来设置元素相对于其包含块（父元素）的上边缘和下边缘的距离的属性。这两个属性常用于定位元素的位置，特别是在使用绝对定位（position: absolute）时。

top属性

top属性用来设置元素的顶部边缘相对于其包含块顶部边缘的偏移值。如果元素的position属性为absolute或fixed，则top属性可以生效。

语法:

element {
    position: absolute;
    top: value;
}

其中，value可以是一个长度值（如像素(px)、百分比(%)等）或一个负值。

下面是一个示例，展示了如何使用top属性将一个元素相对于父元素的顶部边缘向下移动50像素：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Top Property Example</title>
    <style>
        .parent {
            position: relative;
            width: 200px;
            height: 200px;
            background-color: lightblue;
        }

        .child {
            position: absolute;
            top: 50px;
            left: 50px;
            width: 100px;
            height: 100px;
            background-color: lightcoral;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>

在上面的示例中，.parent元素被设置为position: relative;，它的子元素.child被设置为position: absolute;，并且通过top: 50px;属性向下移动了50像素。

bottom属性

与top属性类似，bottom属性用来设置元素的底部边缘相对于其包含块底部边缘的偏移值。同样，只有在元素的position属性为absolute或fixed时，bottom属性才会生效。

语法:

element {
    position: absolute;
    bottom: value;
}

value的取值与top属性相似，可以是长度值或负值。

下面是一个示例，展示了如何使用bottom属性将一个元素相对于父元素的底部边缘向上移动30%：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bottom Property Example</title>
    <style>
        .parent {
            position: relative;
            width: 200px;
            height: 200px;
            background-color: lightblue;
        }

        .child {
            position: absolute;
            bottom: 30%;
            left: 50px;
            width: 100px;
            height: 100px;
            background-color: lightcoral;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>

在上面的示例中，.parent元素和.child元素的样式与前面的示例相似，但是.child元素的bottom: 30%;属性使其相对于父元素的底部边缘向上移动了30%。