Html基本定位
2021/11/4 23:09:57
本文主要是介绍Html基本定位,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
在HTML中有基本的定位三种:
固定定位:相对于浏览器定位
相对定位:相对于原本的位置(依然会占据原来的空间)
绝对定位:相对于距离它最近的已定位父级定位
以上代码下面是的效果,如下图所示
两个像素块未能重合的原因是因为:绝对定位是根据距离他最近的已定位父级定位,由上述代码可知#jueDui的父级为body,但是父级body为空,所以寻找更上一级为html,也就是浏览器页面。相对定位比绝对定位偏离8个像素,因为相对定位不能脱离文档流,所以相对定位会多出8个元素(浏览器页面margin为8px)。两者重叠只需要将绝对定位的left改为108px,两者即可重叠。
固定定位:蓝色元素块为固定定位,随着浏览器页面的变化而变,但相对于浏览器位置不变,例如百度的右边提示
无论怎么滑动页面,它相对于页面的位置不变。
这篇关于Html基本定位的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-04-07金融企业区域集中库的设计构想和测试验证
- 2024-03-11前端CSS的工程化——掌握Sass这四大特性就够了
- 2024-02-21h5关联css样式(html怎么和css关联)-icode9专业技术文章分享
- 2024-02-07Firefox禁止远程字体加速网页加载及图标字体补充安装
- 2024-02-07一个菜鸡前端的3年总结-「2023」
- 2024-01-18最火前端Web组态软件(可视化)
- 2024-01-12程序员提效 x10 的必备开源“神器”
- 2024-01-11前端可以监控静态资源的时间吗-icode9专业技术文章分享
- 2024-01-11前端系列:ES6-ES12新语法
- 2024-01-03前端 Git 使用约定