css定位-position
2024-10-21 09:57:03
前言
定位的目的就是把元素摆放到指定的位置。
定位上下文:定位元素的大小,位置都是相对于定位上下文的。
position属性值有5个值
static:所有有元素定位默认的初始值都是static。就是不定位。
relative(相对定位):相对自身之前的位置进行定位,之前占有的空间任然保留。
absolute(绝对定位):在文档树中从下到上找最近的,position拥有static之外值的先祖元素作为定位上下文,其宽高百分比相对的都是定位上下文。一直找到根元素为止,都没有就把根元素作为上下文。
fixed(绝对定位):相对于浏览器视窗定位。
注意:当元素的position拥有absolute和fixed就会生块级框,拥有设置宽高的的能力。无论它之前是什么类型的元素。
定位方向
position属性拥有static之外的值时,就叫做拥有定位。可以使用top/bottom/left/right四个值相对定位上下文指定位置。
小技巧:让定位元素在定位上下文中水平,垂直居中。
#hero{
position:absolute;
top:;
left:;
right:;
bottom:;
margin:auto;
}
positions与流(z-index)
流:以页面正常流为0点的z轴,横截面看来就像一本书。背景z值是-1。
z-index:用来调整元素的层级,拥有absolute和fixed的元素才能够使用这个使用。
position的默认操作:absolute、fixed属性会把元素从正常流中脱离出来。位于正常流上方。把z值修改为1。
小结:
1,position属性有5个值:static/relative/absolute/fixed 。
2,拥有absolute或fixed的元素能够使用z-index调整层级。
3,让元素脱离文档正常流的定位属性会改变元素的显示,在元素周围生成块级框。
最新文章
- TODO:MongoDB的查询更新删除总结
- APICloud开发App总结(一)
- ASP.NET Misconfiguration: Excessive Session Timeout
- Firefox 23中的新特性(新陷阱)
- 文件系统管理 之 Linux 创建文件系统及挂载文件系统流程详解
- windows中用eclipse开发Android环境搭建SDK安装异常
- PHP 函数extension_loaded();
- MATLAB绘图与图形处理
- Activity启动模式图文详解
- Eclipse+Java+OpenCV246人脸识别
- 《python源代码分析》笔记 pythonVM一般表达式
- sql备份(导出脚本)
- PHP协程入门详解
- 洛谷P2480 [SDOI2010]古代猪文(费马小定理,卢卡斯定理,中国剩余定理,线性筛)
- servlet 获取 post body 体用流读取为空的问题【转】
- redhat5 设置静态ip
- vmware使用vsphere的镜像
- 根据23423条件,截取字段‘abdecsdsadsadsad’,以ab/dec/sdsa/ds/ads 输出
- 异常之交叉编译---arm-vfp-linux-gnu/bin/ld: cgic.o: Relocations in generic ELF (EM: 3)
- Java并发工具类之并发数控制神器Semaphore