CSS - top 属性

CSS top 属性用于指定当 position 属性设置为绝对、固定、相对或粘性时，元素相对于其包含元素的垂直位置。

注意：仅当 position 属性设置为 static 以外的值（默认值）时，top 属性才起作用。

根据 position 属性的值，确定 top 属性的效果。

属性值	Bottom 属性
absolute or fixed	指定元素的上边缘的外边距与容器的上边距之间的内边距之间的距离。
relative	指定元素的上边缘在其正常位置以下移动的距离。
sticky	用于计算粘性约束矩形。
static	对元素的位置没有影响。

当同时指定了顶部和底部值时，将 position 设置为绝对值或固定值，并且高度为 100% 或自动时，将尊重顶部和底部值。

当高度受到约束或位置设置为相对时，顶部值优先，而底部值将被忽略。

可能的值

<length> - 可以指定负值、空值或正值。
<percentage> - 容器高度的百分比。
auto − 默认值。浏览器计算底部位置。

适用于

所有 HTML 定位的元素。

DOM 语法


object.style.top = "20px";

CSS top - 绝对位置

这是一个示例，我们设置了 position：absolute 和不同的 top 属性值（auto、percent、length） -


<html>
<head>
<style> 	
	 	div {
	 	 	 position: absolute;
	 	 	 height: 100px;
	 	 	 border: 3px solid rgb(12, 5, 62);
	 	}
	 	div.auto {
	 	 	 top:auto;
	 	 	 background-color: yellow;
	 	}
	 	div.percent {
	 	 	 top:30%;
	 	 	 background-color: pink;
	 	}
	 	div.length {
	 	 	 top:3in;
	 	 	 background-color:transparent;
	 	}
</style>
</head>
<body>
	 	<div class="auto">Position:absolute top:auto</div>
	 	<div class="percent">Position:absolute top:30%</div>
	 	<div class="length">Position:absolute top:3inches</div>
</body>
</html>

CSS top - 相对位置

下面是一个示例，其中 position：relative 和不同的 top 属性值（auto、percent、length） -


<html>
<head>
<style> 	
	 	div {
	 	 	 position: relative;
	 	 	 height: 100px;
	 	 	 border: 3px solid rgb(12, 5, 62);
	 	}
	 	div.auto {
	 	 	 top:auto;
	 	 	 background-color: yellow;
	 	}
	 	div.percent {
	 	 	 top:30%;
	 	 	 background-color: pink;
	 	}
	 	div.length {
	 	 	 top:3in;
	 	 	 background-color:transparent;
	 	}
</style>
</head>
<body>
	 	<div class="auto">Position:relative top:auto</div>
	 	<div class="percent">Position:relative top:30%</div>
	 	<div class="length">Position:relative top:3inches</div>
</body>
</html>

CSS top - 固定位置

这是一个示例，我们设置了 position：fixed 和不同的 top 属性值（auto、percent、length） -


<html>
<head>
<style> 	
	 	div {
	 	 	 position: fixed;
	 	 	 height: 100px;
	 	 	 border: 3px solid rgb(12, 5, 62);
	 	}
	 	div.auto {
	 	 	 top:auto;
	 	 	 background-color: yellow;
	 	}
	 	div.percent {
	 	 	 top:30%;
	 	 	 background-color: pink;
	 	}
	 	div.length {
	 	 	 top:3in;
	 	 	 background-color:transparent;
	 	}
</style>
</head>
<body>
	 	<div class="auto">Position:fixed top:auto</div>
	 	<div class="percent">Position:fixed top:30%</div>
	 	<div class="length">Position:fixed top:3inches</div>
</body>
</html>

CSS top - 粘滞位置

下面是一个示例，其中 position：sticky 和不同的 top 属性值（auto、percent、length） -


<html>
<head>
<style> 	
	 	div {
	 	 	 position: sticky;
	 	 	 height: 100px;
	 	 	 border: 3px solid rgb(12, 5, 62);
	 	}
	 	div.auto {
	 	 	 top:auto;
	 	 	 background-color: yellow;
	 	}
	 	div.percent {
	 	 	 top:30%;
	 	 	 background-color: pink;
	 	}
	 	div.length {
	 	 	 top:3in;
	 	 	 background-color:transparent;
	 	}
</style>
</head>
<body>
	 	<div class="auto">Position:sticky top:auto</div>
	 	<div class="percent">Position:sticky top:30%</div>
	 	<div class="length">Position:sticky top:3inches</div>
</body>
</html>

CSS top - 静态位置

下面是一个示例，其中 position：static 和不同的 top 属性值（auto、percent、length） -


<html>
<head>
<style> 	
	 	div {
	 	 	 position: static;
	 	 	 height: 100px;
	 	 	 border: 3px solid rgb(12, 5, 62);
	 	}
	 	div.auto {
	 	 	 bottom:auto;
	 	 	 background-color: yellow;
	 	}
	 	div.percent {
	 	 	 bottom:30%;
	 	 	 background-color: pink;
	 	}
	 	div.length {
	 	 	 bottom:3in;
	 	 	 background-color:transparent;
	 	}
</style>
</head>
<body>
	 	<div class="auto">Position:static top:auto</div>
	 	<div class="percent">Position:static top:30%</div>
	 	<div class="length">Position:static top:3inches</div>
</body>
</html>

本页