(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. PostgreSQL学习笔记-2.基础知识:INSERT、SELECT、运算符、表达式、约束

    PostgreSQL INSERT INTO 语句用于向表中插入新记录,兼容SQL通用语法. 语法 INSERT INTO 语句语法格式如下: INSERT INTO TABLE_NAME (colu ...

  2. 解决 Steam 无法自动登录的问题

    前言 劳动节假期闲的没事,重装一下电脑,结果电脑的 Steam 不会自动登录了,每次重启电脑就要重新输入密码和令牌.查了一下居然是 Windows 凭据管理器默认不会自动启动的问题. 解决方法 打开计 ...

  3. Caused by: liquibase.exception.ValidationFailedException: Validation Failed:1 change sets check sum

    db/changelog/mysql/changelog-0001-307096-1.0.sql::1.0::buoluo.meng was: 8:a5d8f616a121230c204fd2b878 ...

  4. PKCS#11:密码设备与应用程序的密码学接口

    密码学在信息安全中扮演着至关重要的角色.为了保护敏感信息.数字身份和网络通信的安全性,密码设备(如硬件安全模块HSM)与应用程序之间的安全通信和互操作性变得至关重要.PKCS#11(Public-Ke ...

  5. Chiplet解决芯片技术发展瓶颈

    这是IC男奋斗史的第38篇原创 本文1776字,预计阅读4分钟. Chiplet封装是什么 介绍Chiplet前,先说下SOC.Chiplet和SOC是两个相互对立的概念,刚好可以用来互为参照. SO ...

  6. React项目中webpack的配置过程

    初始化一个web项目 使用npm init -y 初始化一个项目 在项目目录下创建src, dist文件夹,创建webpack.config.js配置文件 然后在src文件夹下创建index.js, ...

  7. Ansible与Ansible部署

    Ansible与Ansible部署 Ansible简介: Ansible是一个基于Python开发的配置管理和应用部署工具,现在也在自动化管理领域大放异彩.它融合了众多老牌运维工具的优点,Pubbet ...

  8. Redis系列之常见数据类型应用场景

    目录 String 简单介绍 常见命令 应用场景 Hash 简单介绍 常见命令 应用场景 List 简单介绍 常见命令 应用场景 Set 简单介绍 常见命令 应用场景 Sorted Set(Zset) ...

  9. 什么是PIO

    PIO,最早是我在raspberry pi pico的介绍中偶然看到的一个新词 转载来在[https://zhuanlan.zhihu.com/p/347948344] 关于PIO的介绍如下: MCU ...

  10. 2022.7.16 lhm_ 讲课纪要

    前言 啊好的,这节课又是对牛弹琴课...... 虽说题给的不难,以黄绿为主,,穿插了一个蓝一个紫,但是给一群不知道什么是树什么是DAG的人讲树形dp和dag上dp有点.... 顺便讲了讲拓扑排序和记忆 ...