CSS top顶部边缘偏移属性

原创 国哥笔记  2018-09-10 19:52  阅读 711 views 次

top属性定义及用法

在css中,top属性是用来定义一个定位元素的上外边距边界与其包含块上边界之间的偏移。

top属性作用于相对定位元素时,当top属性和bottom属性都为auto时,其计算值则都为 0;当其中属性值有一个为auto时,则取另一个属性值的相反数;当两个属性值都不是auto,bottom属性值将取top属性值的相反数。

注意:必须是争对定位元素,对于非定位元素没有影响( "position" 属性的值为 "static",即默认,那么设置 "top" 属性就不会任何效果)

top 相似属性

  • top:定义定位元素的上外边距边界与其包含块上边界之间的偏移;
  • right :定义定位元素右外边距边界与其包含块右边界之间的偏移;
  • bottom:定义定位元素下外边距边界与其包含块下边界之间的偏移;
  • left:定义定位元素左外边距边界与其包含块左边界之间的偏移;

top属性值

  • auto :浏览器自动计算上边缘的位置(默认值)。
  • %:以百分比计算上边缘位置(可以设置为负值)。
  • length:使用px、cm等单位设置元素的上边缘位置(可以设置为负值)。
  • Inherit:从父元素继承top属性的值。

top属性在不同定位中的应用

  1. 在position:fixed(固定定位)中:top属性是指浏览器的视窗顶部边缘与指定元素顶部边缘的距离;
  2. 在position:absolute(绝对定位)中:top属性是指元素的顶部与最近父元素(非position:absolute)的顶部距离;
  3. 在position:relative(相对定位)中:top属性是定义元素相对没有定位前显示的位置向下偏移量;
  4. 在position:sticky(粘性布局)中:top属性是指当元素在视口内时它的位置是相对的,并且当它在外部时它的位置是固定的;
  5. 在postion:static(默认)中:top属性对元素没有影响。

css定位详细笔记见:css定位之position属性的用法笔记

实例(以绝对定位为例):

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS top顶部边缘偏移属性</title>
<style type="text/css">
#a{width: 300px;height: 200px;background: #eee;position:absolute;}
#b{width: 100px;height: 100px;background: red;position:absolute;top:120px;}
#c{width: 100px;height: 100px;background: #555;position:absolute;}
</style>
</head>
<body>
<div id = "a">
<div id = "b">使用top属性向下移动120px</div>
<div id = "c">默认情况</div>
</div>
</body>
</html>

运行结果:

 

CSS top顶部边缘偏移属性

 

更多css属性请移步到——>css属性大全

本文地址:https://www.ggbiji.com/css-top.html
版权声明:本文为 国哥笔记 原创/整理文章,欢迎分享,转载请注明出处!

发表评论


表情