首页 > 其他分享 >position属性总结

position属性总结

时间:2023-07-18 21:22:37浏览次数:39  
标签:总结 定位 initial 元素 position fixed 属性

1. position: relative;相对定位

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

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

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

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

2. position: absolute;绝对定位

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

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

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

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

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

6> 提升层级(同相对定位)

3. position: fixed;固定定位

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

4. position:static:默认值

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

5. position: sticky 粘性定位

粘性定位,该定位基于用户滚动的位置。

它的行为就像 position:relative; 而当页面滚动超出目标区域时,它的表现就像 position:fixed;,它会固定在目标位置。

注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix 。

6. position: inherit

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

7. posiyion: initial

设置该属性为默认值,详情查看CSS initial 关键字

initial 关键字用于设置 CSS 属性为它的默认值。

initial 关键字可用于任何 HTML 元素上的任何 CSS 属性。

标签:总结,定位,initial,元素,position,fixed,属性
From: https://www.cnblogs.com/longxingzhe/p/17564177.html

相关文章

  • 20230718巴蜀暑期集训测试总结
    T1做了\(3h\),时间复杂度不对,小样例都还有一个没过。考虑容斥,不连通的情况枚举\(1\)号点所在连通块。设\(f_{S,i}\)表示\(S\)连通且选了\(i\)条边的方案数。设\(inb_s\)表示\(S\)内部的边数。那么有转移:\[f_{S,i}=\binom{inb_S}i-\sum_{T\subsetneqqS,1\inT}......
  • 标签的属性
    img标签标签的属性分类1.自带的属性2.自定义属性<imgsrc="地址"alt="描述信息">src属性:图片的地址1.外链地址2.相对地址alt属性:当图片加载失败后,显示的描述信息width属性:控制图片宽度height属性:控制图片高度ps:二者等比例缩放a标签a:超链接<ahref=""></a>......
  • 7.17总结
    周一赶凌晨的火车去青岛,九点半到青岛,坐地铁去酒店,下午租车环海,晚上去啤酒节,真的很好。 ......
  • 7.18总结
    周二十点半才醒,然后十二点从黄岛坐地铁到市南区,下午做了游轮,去了八大峡打卡路星河耿耿网红地,但是封锁不能进去了,现在正在坐地铁去第三海浴。 ......
  • 【考后总结】7 月多校国赛模拟赛 3
    7.14冲刺国赛模拟36T1染色题关键性质是奇数偶数位上可以放置的只有两种,若\(i\)和\(i-2\)选的颜色不同,那么在\(i\)位置放一个球,\([l,r]\)的限制等价于\([l+2,r]\)中奇数位和偶数位不同时有球。设\(f_i\)为\(i\)放置一个球的合法方案数,这样直接枚举上一个球所在......
  • [C#]LINQ中如何按实体的某个属性去重
    NET[C#]LINQ中如何按实体的某个属性去重后返回不重复的集合?问题描述比如有如下实体集合:Person1:Id=1,Name="Test1"Person2:Id=1,Name="Test1"Person3:Id=2,Name="Test2"如何使用LINQ按Person.Id去重,返回的集合只包含Person1和Person3?方案一创建一个静态扩展......
  • 用Python操控斑马打印机的技术总结
    前言由于之前产品打印的标签为人工输入,可能存在信息错误且不适合大批量操作。所以我进行了前期的研究和总结,完成了任务,并这里做下技术总结,方便后面的人进行开发。技术总结斑马打印机的坑官网:http://www.zebra.gd.cn/现在主流的工业打印机都支持二次开发的,要么有自己的一套语......
  • C# 循环对象,获取对象每个属性的名、值、类型
    varcurData=newStudent();foreach(System.Reflection.PropertyInfopincurData.GetType().GetProperties()){if(p.PropertyType.FullName==typeof(decimal).FullName){ls.Add((decimal)p.GetValue(curDat......
  • 缕析条分Scroll属性
    最近有项目需要使用js原生开发滑动组件,频繁要用到dom元素的各种属性,其中以各种类型的height和top属性居多,名字相近,含义也很容易搞混。因此特地总结归纳了一下常用的知识点,在文末我们来挑战实现一个简易的移动端Scroll组件。要理解height和top,要从盒模型开始说起,首先我们来认识一......
  • 传奇开区服务器重启套装属性就没有了或者特效消失
    有的小伙伴遇到服务端设置正常,但是服务器重启之后套装属性就没有了,或者就是特效消失的情况,不知道怎么解决的小伙伴不妨耐心看看今天的分享出现这样的情况,主要原因是因为游戏服务器是云主机,如编写了一个文档本身已经保存.但是在重新打开有时会出现没有保存的问题。遇到这种情况,只能......