position定位属性值

最新推荐文章于 2024-04-27 17:15:07 发布

酱芈芈

最新推荐文章于 2024-04-27 17:15:07 发布

阅读量1.6k

点赞数 2

分类专栏：面试题文章标签： css3 css 前端

本文链接：https://blog.csdn.net/weixin_52998620/article/details/122363371

版权

面试题专栏收录该内容

42 篇文章 0 订阅

订阅专栏

position的含义是指定位类型，取值类型可以有：static、relative、absolute、
fixed、inherit、和sticky,这里sticky是css3新发布的一个属性。

1、position:static

static(没有定位)是position的默认值，元素设置相对于原本位置的定位，
元素并不脱离文档流，因此元素原本的位置会被保留，其他的元素位置不会受
到影响

2、position:relative

relative(相对定位)是指给元素设置相对于原本位置的定位，元素并不脱离文档流，因此元素原本的位置会被保留，其他的元素位置不会受到影响

3、position:absolute

absolute(绝对定位)是指给元素设置绝对的定位，相对定位的对象可以分为两种情况：
1）、设置了absolute的元素如果存在有祖先元素设置了position属性为relative或者
absolute,则这时元素的定位对象为此已设置position属性的祖先元素
2）、如果并没有设置了position属性的祖先元素，则此时相对于body进行定位

4、position:fixed

可以简单说fixed是特殊版的absolute,fixed元素总是相对于body定位的。

5、inherit

继承父元素的position属性，但需要注意的是IE8已及往前的版本都不支持inherit属性。

6、sticky（黏性定位，吸顶效果）

position 属性中最有意思的就是sticky了，设置了sticky的元素，在屏幕范围
（viewport）时该元素的位置并不受到定位影响（设置top、left等属性无效），
当该元素的位置将要移除偏移范围时，定位又会变成fixed,根据设置的left、top等属性固定位置的效果

<!DOCTYPE html>
<html lang="en">
 <head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
  .top,
  .foot {
    width: 100%;
    height: 200px;
    background: red;
    border: 1px solid black;
  }
  .sticky {
    width: 100%;
    height: 100px;
    position: sticky;
    top: 0;
    background-color: green;
  }
</style>
</head>
<body>
<div class="top"></div>
<div class="top"></div>
<div class="top"></div>
<div class="sticky"></div>
<div class="foot"></div>
<div class="foot"></div>
<div class="foot"></div>
<div class="foot"></div>
<div class="foot"></div>
</body>
</html>

酱芈芈

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
position定位属性值

position的含义是指定位类型，取值类型可以有：static、relative、absolute、fixed、inherit、和sticky,这里sticky是css3新发布的一个属性。1、position:staticstatic(没有定位)是position的默认值，元素设置相对于原本位置的定位，元素并不脱离文档流，因此元素原本的位置会被保留，其他的元素位置不会受到影响2、position:relativerelative(相对定位)是指给元素设置相对于原本位置的定位，元素并不脱离
复制链接

扫一扫