Html基本定位
2021/11/4 23:09:57
本文主要是介绍Html基本定位,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
在HTML中有基本的定位三种:
固定定位:相对于浏览器定位
相对定位:相对于原本的位置(依然会占据原来的空间)
绝对定位:相对于距离它最近的已定位父级定位
以上代码下面是的效果,如下图所示
两个像素块未能重合的原因是因为:绝对定位是根据距离他最近的已定位父级定位,由上述代码可知#jueDui的父级为body,但是父级body为空,所以寻找更上一级为html,也就是浏览器页面。相对定位比绝对定位偏离8个像素,因为相对定位不能脱离文档流,所以相对定位会多出8个元素(浏览器页面margin为8px)。两者重叠只需要将绝对定位的left改为108px,两者即可重叠。
固定定位:蓝色元素块为固定定位,随着浏览器页面的变化而变,但相对于浏览器位置不变,例如百度的右边提示
无论怎么滑动页面,它相对于页面的位置不变。
这篇关于Html基本定位的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-02动态表格实战:新手入门教程
- 2024-11-02动态菜单项实战:新手入门教程
- 2024-11-02动态面包屑实战详解:新手入门教程
- 2024-11-02富文本编辑器实战:从入门到上手指南
- 2024-11-02前端项目部署实战指南
- 2024-11-02拖拽表格实战入门教程
- 2024-11-02Element-Plus项目实战:从入门到实践
- 2024-11-02TagsView标签栏导航实战:初学者的详细教程
- 2024-11-01前端项目部署入门:新手必读指南
- 2024-11-01富文本编辑器学习:从入门到初步掌握