在CSS中，top是用来设置一个元素距离其父元素顶部的距离的属性。它可以被用于定位元素、动画效果、以及其他需要改变元素位置的场景。
以下是一些使用top属性的常见场景：
1、定位元素：在CSS中，position属性可以被设置为absolute或fixed，使元素脱离文档流，并可以通过设置top、bottom、left和right属性来确定它们的位置。例如，设置position: absolute和top: 50px可以让元素距离其父元素顶部50像素的位置。
<div style="position: absolute; top: 50px;">This is a positioned element.</div>
2、动画效果：在CSS中，可以使用动画关键帧来设置元素在不同时间点的样式，并使用top属性来改变元素位置。例如，下面的代码将在3秒钟内将元素从上往下移动100像素。
@keyframes move-down {
from { top: 0; }
to { top: 100px; }
}div {position: relative;animation: move-down 3s forwards;}
3、覆盖默认样式：有时候，浏览器会为元素添加一些默认的样式。可以使用top属性来覆盖这些默认的样式。例如，下面的代码将取消按钮的默认垂直居中，并将其向上移动10像素。
button {position: relative;top: -10px;vertical-align: top;}
以上是关于css top样式用法与实例教程。