position属性值及其特点是什么

发布时间:2022-03-01 13:48:50 作者:小新
来源:亿速云 阅读:153

这篇文章将为大家详细讲解有关position属性值及其特点是什么,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

  position属性

  position属性就是用来规定元素的定位类型,即把元素放置到一个静态的、相对的、绝对的、或固定的位置中。因此在position属性中它有四个属性值分别为:static、relative、absolute、fixed。接下来在文章中将具体介绍这四个属性值的用法及特点。

  static属性值

  static属性表示默认值,即没有定位,元素出现在正常的流中。忽略了top,bottom,left,right或者z-index声明

  <style>

  div{

  width:100px;

  height:100px;

  border:10pxsolid#ccc;

  }

  div.static{

  position:static;

  border:10pxsolidpink;

  }

  </style>

  </head>

  <body>

  <div></div>

  <divclass="static">使用了position:static;</div>

  </body>

  效果图:

  relative属性值

  表示相对定位的元素,可以通过top,bottom,left,right的设置相对于其正常(原先本身)位置进行定位。它是默认参照父级的原始点为原始点来定位的,若无父元素则按照上一个元素的底部为原始点进行定位。

  1、相对定位不会影响元素本身特性

  2、不会使元素脱离文档流(元素原本位置会被保留)

  3、没有定位偏移量时对元素无影响

  4、提升层级,可以使用z-index来改变一个定位元素的层级关系,从而改变元素的覆盖关系,值越大越在上面

  div{

  width:200px;

  height:200px;

  background-color:pink;

  }

  div.relative{

  position:relative;

  background-color:lightblue;

  left:45px;

  }

  </style>

  </head>

  <body>

  <div>父元素

  <divclass="relative">子元素</div>

  </div>

  </body>

position属性值及其特点是什么


关于“position属性值及其特点是什么”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。

推荐阅读:
  1. position
  2. HTML中position的属性值有哪些

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

position

上一篇:Git怎么删除本地或远程分支

下一篇:怎么使用Git进行版本控制

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》