[分享]css中的top是什么意思

在css中，我们经常会遇到top这个属性，那么这个属性具体是干什么的呢？ / 设置元素的top值为50px / div { top: 50px; } 从上面这段代码可以看出，top是用来设置元素的上...

在css中，我们经常会遇到top这个属性，那么这个属性具体是干什么的呢？

  /* 设置元素的top值为50px */
        div {
            top: 50px;
        } 

从上面这段代码可以看出，top是用来设置元素的上边距离元素的最近定位祖先元素顶部的距离。

最近定位祖先元素是什么呢？

在css中，如果一个元素没有被定位（即没有设置position属性），那么它的最近定位祖先元素就是html元素。如果元素被定位了，那么它的最近定位祖先元素就是离它最近的已经定位了的祖先元素。 如果没有已定位的祖先元素，则最终的定位元素是html。

那么，当一个元素的top值不为auto时，它就会被定位，并且按照top属性指定的距离向下偏移。如果元素没有设置left属性，则left值为auto，即不偏移。

  /* 设置定位元素向下偏移50px */
        div {
            position: relative;
            top: 50px;
        } 

需要注意的是，top属性只有在元素被定位时才会有效，否则top的值将被忽略。