• 技术文章 >web前端 >css教程

    position的几个属性的作用分别是什么

    王林王林2020-06-16 16:24:54转载1893

    position 的常见四个属性值: relative,absolute,fixed,static。一般都要配合"left"、"top"、"right" 以及 "bottom" 属性使用。

    下面我们来详细说明一下:

    static:默认位置

    在一般情况下,我们不需要特别的去声明它,但有时候遇到继承的情况,我们不愿意见到元素所继承的属性影响本身,从而可以用Position:static取消继承,即还原元素定位的默认值。设置为 static 的元素,它始终会处于页面流给予的位置(static 元素会忽略任何 top、 bottom、left 或 right 声明)。不常用。

    relative:相对定位

    相对定位是相对于元素默认的位置的定位,它偏移的 top,right,bottom,left 的值都以它原来的位置为基准偏移,而不管其他元素会怎么 样。注意 relative 移动后的元素在原来的位置仍占据空间。

    absolute:绝对定位

    设置为 absolute 的元素,如果它的 父容器设置了 position 属性,并且 position 的属性值为 absolute 或者 relative,那么就会依据父容器进行偏移。如果其父容器没有设置 position 属性,那么偏移是以 body 为依据。注意设置 absolute 属性的元素在标准流中不占位置。

    fixed:固定定位

    位置被设置为 fixed 的元素,可定位于相对于浏览器窗口的指定坐标。不论窗口滚动与否,元素都会留在那个位置。它始终是以 body 为依据的。 注意设置 fixed 属性的元素在标准流中不占位置。

    推荐教程:css快速入门

    以上就是position的几个属性的作用分别是什么的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:掘金,如有侵犯,请联系admin@php.cn删除
    专题推荐:position 属性
    上一篇:如何居中一个浮动元素?如何让绝对定位的div居中? 下一篇:css3常见新特性介绍
    VIP课程(WEB全栈开发)

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• 你一定要知道的css属性值规范• 为什么不建议使用@import引入css• CSS 预处理器• 纯css3实现信纸/同学录效果(代码示例)
    1/1

    PHP中文网