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