媛代码社区

CSS 中 position 属性详解

技术
codinggirls
· 阅读 318 · 评论 0 · 3 年前

CSS中position 属性对应的值有 static、relative、absolute、fixed、sticky,在开发页面过程中会遇到元素的定位问题,那么如果我们了解了 position 属性的用处,在理清个值之间的区别之后,遇到需要定位处理的地方就不至于摸不清头脑了。

这里需要说明的是,如果设置了 position 属性,并且值不为 static ,那么元素可以设置对应的坐标属性 top | right | bottom | left 和 z-index ,记住哦,坐标属性只有在设置了 position 属性且值不为 static 的元素身上起作用。接下来我们将一一攻破 position 各项值的作用。

1. Static

position:static是元素默认的定位设置。不管开发者有没有设置此属性,元素都会在正常的布局流中。

注意看下面的代码

<body>
  <div class="block-red"></div>
  <div class="block-blue"></div>
</body>
<style>
    body {
      margin: 0;
    }
    .block-red{
      position:static;
      width:100px;
      height:100px;
      background-color:red;
    }
    .block-blue{
      width:100px;
      height:100px;
      background-color:blue;
    }
  </style>

 

 

不管是否设置了 position:static 结果都是一样的

其实在没有定位需求的时候写不写 position:static都是无关紧要的。他只是元素定位的一个默认值而已。既然写不写都无所谓那就不写了吧,hiahia。

2.Relative

position:relative,元素相对于其自身最初位置的定位。元素不会从正常的布局流中删除。下面我们来给设置了 relative 属性的红色模块添加附加的属性 top:100px 和 left:100px设置。

.block-red{
      position:relative;
      width:100px;
      height:100px;
      background-color:red;
      top:100px;
      left:100px;
    }

红色方块相对于原来的位置分别移动了x=100px,y=100px,而蓝色方块位置不变

我们会发现设置了 relative 定位的红色方块原来的占位不变,而且蓝色方块并没有被其定位所影响

3.Absolute

position:absolute,他的参考点是最接近的一个设置了 position 属性的父元素(除了 position:static 的父元素),如果没有父元素或者没有被设置position 属性的父元素,html 元素会被当做参考点。当设置了 absolute 属性,那么此元素会从正常布局流中删除,其他元素的位置也会跟着受影响我们看一下下面的例子

现在我们将红色方块position 设置成 absolue观察一下

.block-red{
      position:absolute;
      width:100px;
      height:100px;
      background-color:red;
    }
<body>
  <div>
    <div class="block-red"></div>
    <div class="block-blue"></div>
  </div>
</body>

 

 

红色方块的坐标顶点会移到父元素的顶点,这里的父元素是 html

我们发现蓝色模块不见,而事实蓝色模块并没有消失,只是被红色模块遮挡,红色方块原来的占位不见了,它已经不在正常的布局流中,所以红色模块的定位设置影响了其他元素的正常布局。

这时我们再修改一下代码,在外围添加一个 div wrapper,并修改红色方块的left属性left:0px:

.wrapper{
      background-color:#000;
      width:300px;
      height:300px;
      margin-left:100px;
    }
    .block-red{
      position:absolute;
      width:100px;
      height:100px;
      background-color:red;
      left:0px;
    }
    .block-blue{
      width:100px;
      height:100px;
      background-color:blue;
    }
<body>
  <div class="wrapper">
    <div class="block-red"></div>
    <div class="block-blue"></div>
  </div>
</body>

 

 

 

我们发现,即使在添加了父级div 的情况下,红色方块并没有将父级div 当做参考点,而是把html当做参考点。

 
我们再修改一下代码,给父级 div 添加 position 属性 position:relative
.wrapper{
      position:relative;
      background-color:#000;
      width:300px;
      height:300px;
      margin-left:100px;
    }
 

此时我们会发现,设置了position 属性的 div 变成了红色方块的参考点了。

4.Fixed

fixed 和 absolute 类似,元素会从正常的布局流中删除。设置了 position:fixed 的元素参考点是浏览器窗口,他的位置不会随着页面的滚动而发生变化,在日常的开发中也是很常用的。我们看一下代码

.wrapper{
      background-color:#000;
      width:300px;
      height:3000px;
      margin-left:100px;
    }
    .block-red{
      width:100px;
      height:100px;
      background-color:red;
    }
    .block-blue{
      position:fixed;
      top:0px;
      left:200px;
      width:100px;
      height:100px;
      background-color:blue;
    }

 

 

我们发现不管页面如何滚动,蓝色方块的位置都不会改变,颇有一种管你们怎么变,反正我就在这里了你拿我也我没本法得感觉。

5.Sticky

position:sticky 属性,相当于 absolute 和 fixed 的叠加,我们来用实际代码来理解一下。修改一下代码红色方块和黑色方块不加 position 属性,给黑色方块设置一个可以滚动的高度,再给蓝色方块设置 position:sticky属性,再来观察一下:

.wrapper{
      background-color:#000;
      width:300px;
      height:3000px;
      margin-left:100px;
    }
    .block-red{
      width:100px;
      height:100px;
      background-color:red;
    }
    .block-blue{
      position:sticky;
      top:0px;
      width:100px;
      height:100px;
      background-color:blue;
    }
    .block-green{
      width:100px;
      height:100px;
      background-color:green;
    }
<div class="wrapper">
    <div class="block-red"></div>
    <div class="block-blue"></div>
    <div class="block-green"></div>
 </div>

 

 

我们发现在页面没有滚动时,蓝色方块没什么变化,定位规则遵循 position:relative设置。当我们滚动页面至蓝色方块时,我们会发现,这时蓝色方块定位遵循 position:fixed设置,是不是很神奇呀。因为该属性比较新,浏览器兼容方面还不是很好,所以很少有人用,有兴趣的可以自己试一下。说到这里,有没有对 position 属性有一个清晰认识呢?当然如果想要更好的理解,还是要自己去实际操作。花不了半个小时,就会弄清楚的,为何不试试呢,对吧?

1
帖子评论(0)
发起评论
暂无数据
Loading
推荐帖子
  • 为什么v-for遍历写在子标签上会报错
  • 应届生一般工资多少呀?
  • 分享 | CSS 中各种居中方式
  • 媛代码社区规则
  • 【分享】成为一名前端工程师的学习路线
社区宗旨
媛代码社区是女性科技从业者的聚集地
我们鼓励:
分享生活经验,日常趣事
晒晒您的作品,讨论讨论技术
也可以吐槽职场,抱怨不公
我们致力于:
让更多的人听到我们的声音
打破社会传统偏见!提升个人能力!
快来加入媛代码大家庭吧!
加入组织
二维码

媛代码社区微信公众号