position的属性值
(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的属性值的更多相关文章
- css样式表和选择器的优先级以及position元素属性值的区别
css样式表优先级 问题:当同一个HTML元素被不止一个样式定义时,会使用哪个样式呢? 答:一般而言,所有的样式会根据下面的规则层叠于一个新的虚拟样式表中,其中数字4拥有最高的优先权. 1.浏览器缺省 ...
- style中position的属性值具体解释
Position的英文原意是指位置.职位.状态.也有安置的意思.在CSS布局中,Position发挥着非常关键的数据,非常多容器的定位是用Position来完毕. Position属性有四个可选值,它 ...
- position 的属性值
理论上来说,全部 position 的取值有8个 包括:position:static | relative | absolute | fixed | sticky | initial | inhe ...
- position的四个属性值
1.relative2.absolute3.fixed4.static下面分别讲述这四个属性. <div id="parent"> <div id="s ...
- position属性值4缺一带你了解相对还是绝对抑或是固定定位
阿基米德说“给我一个支点,我能翘起整个地球”,在HTML页面中,给你一个坐标,可以把任何一个元素定位目标点,这就是定位!CSS有三种基本的定位机制:相对定位.绝对定位.固定定位,决定定位的positi ...
- jquery获取、改变元素属性值
//标签的属性称作元素属性,在JS里对应的DOM对象的对应属性叫DOM属性.JS里的DOM属性名有时和原元素属性名不同. //==================================操作元 ...
- tween.js是一款可生成平滑动画效果的js动画库。tween.js允许你以平滑的方式修改元素的属性值。它可以通过设置生成各种类似CSS3的动画效果。
简要教程 tween.js是一款可生成平滑动画效果的js动画库.相关的动画库插件还有:snabbt.js 强大的jQuery动画库插件和Tweene-超级强大的jQuery动画代理插件. tween. ...
- 解决td标签上的position:relative属性在各浏览器中的兼容性问题
在css中的position属性规定了页面元素的定位类型,它有以下几个值: absolute:绝对定位,相对于static以外的第一个父元素进行定位: fixed:生成绝对定位的元素,相对于浏览器窗口 ...
- 元素设置position:fixed属性后IE下宽度无法100%延伸
元素设置position:fixed属性后IE下宽度无法100%延伸 IE bug 出现条件: 1.div1设置position:fixed属性,并且想要width:100%的效果. 2.div2(下 ...
- magento搜索属性值的设置方法
前台特性(Frontend Properties)在快速搜索中应用(Use in quick search) - 开启此选项,在客户使用Header中的 搜索功能时Magento将搜索所有产品这个At ...
随机推荐
- 前端三件套系例之HTML——HTML文档结构、文档声明、主体结构标签、HEAD头部标签、meta元信息、Body内常用标签、6 其他了解
文章目录 HTML文档结构 1. 文档声明 2.主体结构标签 3.HEAD头部标签 4.meta元信息 5 Body内常用标签 5.1 基本标签(块级标签和内联标签) 5.2 div标签和span标签 ...
- C#桶排序算法
前言 桶排序是一种线性时间复杂度的排序算法,它将待排序的数据分到有限数量的桶中,每个桶再进行单独排序,最后将所有桶中的数据按顺序依次取出,即可得到排序结果. 实现原理 首先根据待排序数据,确定需要的桶 ...
- 最新 2023.2 版本 WebStorm 永久破解教程,WebStorm 破解补丁永久激活(亲测有效)
最近 jetbrains 官方发布了 2023.2 版本的 IDEA,之前的激活方法并不支持这个新的版本. 下面是最新的激活教程,激活步骤和之前是类似的,只是换用了不同的补丁文件. 本教程支持 Jet ...
- 打造美团外卖新体验,HarmonyOS SDK持续赋能开发者共赢鸿蒙生态
从今年8月起,所有升级到HarmonyOS 4的手机用户在美团外卖下单后,可通过屏幕上的一个"小窗口",随时追踪到"出餐.取餐.送达"等订单状态.这个能让用户实 ...
- Verilog HDL数据流建模与运算符
数据流建模使用的连续赋值语句由关键词assign开始,一般用法如下: wire [位宽说明]变量名1, 变量名2, ..., 变量名n; assign 变量名 = 表达式; 只要等号右边的值发生变化, ...
- 最小的k个数 (3.20 leetcode每日打卡)
输入整数数组 arr ,找出其中最小的 k 个数.例如,输入4.5.1.6.2.7.3.8这8个数字,则最小的4个数字是1.2.3.4. 示例 1: 输入:arr = [3,2,1], k = 2 输 ...
- C#12中的Collection expressions(集合表达式语法糖)
C#12中引入了新的语法糖来创建常见的集合.并且可以使用..来解构集合,将其内联到另一个集合中. 支持的类型 数组类型,例如 int[]. System.Span<T> 和 System. ...
- 信创就用国产的 Solon Java Framework,v2.6.0 发布
先吹牛! 在 v2.6 这个新的里程碑节点,Solon 又完成了几件惊天大事(每一件,都是经历了漫长时间打磨与积累): (1)Solon Native,有了第一个开源案例:dromara/neutri ...
- python进程状态
思考 为啥我VS编辑器里一直在import中报错,但是写到笔记本里就可以直接用 之前俄罗斯方块也是同样问题 安装 pip install transitions 代码 from transitions ...
- python计算代码运行时间
记录一下自己用python编写计算运行时间的代码 时间类 import time import numpy as np # 编写时间类来方便操作 class Timer: def __init__(s ...