博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
关于position的定位
阅读量:4922 次
发布时间:2019-06-11

本文共 536 字,大约阅读时间需要 1 分钟。

1.固定定位position:fixed;

相对于浏览器窗口来进行定位,设置left,top,bottom,right

2.相对定位position:relative;

相对于元素本身定位,一般不设置left,top,bottom,right,主要是配合绝对定位实现元素的稳定排版。

如果加入了left,top,bottom,right的话相对于元素开始的占位移动,由于相对定位没有脱离文档流,于是保留元素开始的占位。

注:文档流:html布局就是文档流模型的,即块级元素元素独占一行<div><p>等等,行内元素不独占一行<a><span>等等。整个html文件排版下来就是文档流模型。

3.绝对定位position:absolute;

绝对定位相对于已经相对定位的最近的祖先元素,一般为了保证稳定直接给父子元素分别相对定位绝对定位,再加上left,top,bottom,right即可。

   

绝对定位是脱离文档流的,如上例中p元素不占位,如果有定位内容被覆盖通过z-index:xx设置优先级。

 

转载于:https://www.cnblogs.com/yuanyuan0809/p/5387278.html

你可能感兴趣的文章
C# 位数组
查看>>
当递归遇到synchronized
查看>>
HDU - 2141 : Can you find it?
查看>>
bzoj1093 [ZJOI2007]最大半联通子图 缩点 + 拓扑序
查看>>
《Java并发编程的艺术》之线程池(二)
查看>>
SCP注意事项
查看>>
英国NHS
查看>>
ScrollView嵌套GridView和ListView行高问题
查看>>
测试秒杀新版本3.5 stieserver cms
查看>>
Lua获取当前时间
查看>>
自己关于ES6的一点理解
查看>>
Python(32bit)运行报错:MemoryError
查看>>
mysql实用语法
查看>>
为什么要把时间戳追加到目标URL?
查看>>
Python爬虫入门七之正则表达式
查看>>
redis5.0主从配置
查看>>
JavaScript严谨模式(Strict Mode)提升开发效率和质量
查看>>
python_控制台输出带颜色的文字方法
查看>>
luogu2178/bzoj4199 品酒大会 (SA+单调栈)
查看>>
Spark在Yarn上运行Wordcount程序
查看>>