(fixed的父元素永远是浏览器窗口,不会根据页面滚动而改变位置;absolute的父元素是可以设置的,他会永远跟随父元素的位置的改变而改变。)

1、position: relative;相对定位

  • 不影响元素本身特性(无论区块元素还是内联元素会保留其原本特性)

  • 不会使元素脱离文档流(元素原本位置会被保留,即改变位置也不会占用新位置)

  • 没有定位偏移量时对元素无影响(相对于自身原本位置进行偏移)

  • 提升层级(用z-index样式的值可以改变一个定位元素的层级关系,从而改变元素的覆盖关系,值越大越在上面,z-index只能在position属性值为relative或absolute或fixed的元素上有效。) (两个都为定位元素,后面的会覆盖前面的定位)

2、position: absolute;绝对定位

  • 使元素完全脱离文档流(在文档流中不再占位)

  • 使内联元素在设置宽高的时候支持宽高(改变内联元素的特性)

  • 使区块元素在未设置宽度时由内容撑开宽度(改变区块元素的特性)

  • 相对于最近一个有定位的父元素偏移(若其父元素没有定位则逐层上找,直到document——页面文档对象)

  • 相对定位一般配合绝对定位使用(将父元素设置相对定位,使其相对于父元素偏移)

  • 提升层级(同相对定位)

3、position: fixed;固定定位

fixed生成固定定位的元素,相对于浏览器窗口进行定位。

4、position:static:默认值

默认布局。元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。

5、position: inherit

规定应该从父元素继承 position 属性的值。

position的属性值的更多相关文章

  1. css样式表和选择器的优先级以及position元素属性值的区别

    css样式表优先级 问题:当同一个HTML元素被不止一个样式定义时,会使用哪个样式呢? 答:一般而言,所有的样式会根据下面的规则层叠于一个新的虚拟样式表中,其中数字4拥有最高的优先权. 1.浏览器缺省 ...

  2. style中position的属性值具体解释

    Position的英文原意是指位置.职位.状态.也有安置的意思.在CSS布局中,Position发挥着非常关键的数据,非常多容器的定位是用Position来完毕. Position属性有四个可选值,它 ...

  3. position 的属性值

    理论上来说,全部 position 的取值有8个 包括:position:static | relative | absolute | fixed | sticky |  initial | inhe ...

  4. position的四个属性值

    1.relative2.absolute3.fixed4.static下面分别讲述这四个属性. <div id="parent"> <div id="s ...

  5. position属性值4缺一带你了解相对还是绝对抑或是固定定位

    阿基米德说“给我一个支点,我能翘起整个地球”,在HTML页面中,给你一个坐标,可以把任何一个元素定位目标点,这就是定位!CSS有三种基本的定位机制:相对定位.绝对定位.固定定位,决定定位的positi ...

  6. jquery获取、改变元素属性值

    //标签的属性称作元素属性,在JS里对应的DOM对象的对应属性叫DOM属性.JS里的DOM属性名有时和原元素属性名不同. //==================================操作元 ...

  7. tween.js是一款可生成平滑动画效果的js动画库。tween.js允许你以平滑的方式修改元素的属性值。它可以通过设置生成各种类似CSS3的动画效果。

    简要教程 tween.js是一款可生成平滑动画效果的js动画库.相关的动画库插件还有:snabbt.js 强大的jQuery动画库插件和Tweene-超级强大的jQuery动画代理插件. tween. ...

  8. 解决td标签上的position:relative属性在各浏览器中的兼容性问题

    在css中的position属性规定了页面元素的定位类型,它有以下几个值: absolute:绝对定位,相对于static以外的第一个父元素进行定位: fixed:生成绝对定位的元素,相对于浏览器窗口 ...

  9. 元素设置position:fixed属性后IE下宽度无法100%延伸

    元素设置position:fixed属性后IE下宽度无法100%延伸 IE bug 出现条件: 1.div1设置position:fixed属性,并且想要width:100%的效果. 2.div2(下 ...

  10. magento搜索属性值的设置方法

    前台特性(Frontend Properties)在快速搜索中应用(Use in quick search) - 开启此选项,在客户使用Header中的 搜索功能时Magento将搜索所有产品这个At ...

随机推荐

  1. Java 魔法值处理的四种方法

    Java 魔法值处理方案 魔法值的定义 方法一 静态常量(不推荐) 方法二 接口中定义 方法三 定义在实体类 方法四 使用枚举类 enum 总结 魔法值的定义 魔法值是Java中突兀出现在代码中的常量 ...

  2. We Need More Bosses 题解

    We Need More Bosses 题目大意 给定一张图,找到两个点,使得这两个点之间的所有路径必须经过的边最多. 思路分析 我们先来思考一下如果已知两个点,怎么求两个点之间必须经过的边的数量. ...

  3. Cookie入门实例

    cookie介绍:Cookie通常用于网站记录客户的某些信息,比如客户的用户名.客户的喜好(比如,上一次浏览的宝贝)等.一旦用户下次登录,网站可以获取到客户相关的信息,根据这些客户信息,网站可以对客户 ...

  4. 使用 Vue 3 插件(Plugin)实现 OIDC 登录和修改密码(OIDC 系统以 Keycloak 为例)

    背景 目前单位系统常用 Keycloak 作为认证系统后端,而前端之前写的也比较随意,这次用 Vue 3 插件以及 Ref 响应式来编写这个模块.另外,这个可能是全网唯一使用 keycloak 的 O ...

  5. 该如何选择ClickHouse的表引擎

    该如何选择ClickHouse的表引擎 本文将介绍ClickHouse中一个非常重要的概念-表引擎(table engine).如果对MySQL熟悉的话,或许你应该听说过InnoDB和MyISAM存储 ...

  6. Java安全机制之一——SecurityManager和AccessController

    前言: 在看socket相关代码的时候,AbstractPlainSocketImpl中的一段代码吸引了我,其实之前见过很多次类似的代码,但一直不想去看,只知道肯定和权限什么的相关,这次既然又碰到了就 ...

  7. windows下使用Mingw执行make编译

    目录 windows下使用Mingw执行make编译 下载安装 Mingw 设置环境变量 验证环境 gcc mingw32-make 编译 一.准备好相关代码 二.执行Makefile 运行 优化 整 ...

  8. 万字解析XML配置映射为BeanDefinition的源码

    本文分享自华为云社区<Spring高手之路16--解析XML配置映射为BeanDefinition的源码>,作者:砖业洋__. 1. BeanDefinition阶段的分析 Spring框 ...

  9. GitHub Universe 2023:AI 技术引领软件开发创新浪潮

    GitHub 是全球领先的软件开发和协作平台,数百万开发者和企业在此分享.学习和创建卓越的软件.同时 GitHub 处在 AI 技术前沿,通过其先进的 AI 技术增强开发者体验并赋能未来软件开发的使命 ...

  10. 赛意SMOM和金蝶云星空单据接口对接

    赛意SMOM和金蝶云星空单据接口对接 数据源系统:金蝶云星空 金蝶K/3Cloud在总结百万家客户管理最佳实践的基础上,提供了标准的管理模式:通过标准的业务架构:多会计准则.多币别.多地点.多组织.多 ...