html相对定位和绝对定位
相对定位:该元素相对于自己原有位置,偏移一定距离。相对的是自己。
绝对定位:该元素相对于其父元素,偏移一定距离。相对的是父元素,重点是这个父元素也需要是设置了position属性。从最近的父元素开始找,直到找到body位置为止。
1)相对定位
<div id="test"><p class="p1">相对定位:相对于自己原来的位置,偏移一些距离</p><p class="p2">相对定位,相对的是自己</p></div>
对应的css样式:
#test{height: 300px;width: 300px;background: gray;}/*p标签本身会有padding和margin值*/p{margin: 0px;padding: 0px;}.p1{height: 100px;width: 100px;background: blue;}.p2{height: 80px;width: 80px;background: red;}
运行后效果是:(这时没有设置position属性呢)
然后,给p1设置相对定位
.p1{height: 100px;width: 100px;background: blue;/*设置相对定位*/position: relative;/*相对于左边偏移20px,相对于上边偏移20px*/left: 20px;top:20px;}
运行后效果如下:
2)绝对定位
再增加一個div
<body><div id="test"><p class="p1">相对定位:相对于自己原来的位置,偏移一些距离</p><p class="p2">相对定位,相对的是自己</p></div><div id="test2"><p class="p3">绝对定位:相对于自己父元素的位置,偏移一些距离</p><p class="p4">绝对定位,相对的是父元素</p></div> </body>
相应的样式
#test2{height: 300px;width: 300px;background: pink;}.p3{height: 100px;width: 100px;background: green;/*設置绝对定位*/position: absolute;left: 30px;top: 30px;}.p4{height: 90px;width: 90px;background: gold;}
同時將p1的相对定位去掉。这时候效果如下:
然後給p3設置绝对定位:
.p3{height: 100px;width: 100px;background: green;/*設置绝对定位*/position: absolute;left: 30px;top: 30px;}.p4{height: 90px;width: 90px;background: gold;}
觉得效果是怎樣呢?因爲test2是p3的父元素,所以猜測效果是p3相对于test2,向左偏移30px,向下偏移30px。那麽究竟是不是這樣呢??运行后效果如下:
我擦,跟想的不一樣啊。。。
別急,这是因为:虽然test2是p3的父元素,但是test2沒有設置position屬性,所以p3就會繼續向上找,找test2的父元素,直至到body为止。所以就出現了如上效果。那麽,如果想p3相对于test2,向左偏移30px,向下偏移30px,只需給test2設置position屬性即可。
#test2{height: 300px;width: 300px;background: pink;position: relative;}
效果如下:
ok啦,這就是绝对定位。相对的是父元素。
需要注意的是:绝对定位的元素不占原來的位置,這就是p4移動到test2左上角的原因。
html相对定位和绝对定位相关推荐
- WEB学习 -相对定位、绝对定位、固定定位、z-index
相对定位 相对定位,就是微调元素位置的.让元素相对自己原来的位置,进行位置调整. 2.不脱标,老家留坑,形影分离也就是说相对定位不脱标,真实位置是在老家,只不过影子出去了,可以到处飘.3.相对定位用途 ...
- [css] 说说你对相对定位、绝对定位、固定定位的理解
[css] 说说你对相对定位.绝对定位.固定定位的理解 position 属性指定了元素的定位类型.position 属性的五个值:static(默认值) relative(相对定位) fixed(固 ...
- 详解CSS的相对定位和绝对定位
CSS的相对定位和绝对定位 一.Static 静态定位 通常情况下,我们元素的position属性的值默认为static 就是没有定位,元素出现在正常的文档流中,这个时候你给这个元素设置的left,r ...
- css中相对定位和绝对定位
css中相对定位和绝对定位 定位标签:position 包含属性:relative(相对) absolute(绝对) 1.position:relative; 如果对一个元素进行相对定位,首先它将出现 ...
- html相对定位 不占位置,CSS position 相对定位和绝对定位
一.position 的四个值:static.relative.absolute.fixed. 绝对定位:absolute 和 fixed 统称为绝对定位 相对定位:relative 默认值:stat ...
- 一、CSS定位布局[相对定位、绝对定位、固定定位]
一.CSS定位布局 选项 说明 static 默认形为,属于文档流 relative 相对定位 absolute 绝对定位 fixed 固定定位 1.relative 解释:元素在原来的位置开始移动( ...
- html css x y相对定位坐标,【HTML+CSS】浅谈:相对定位与绝对定位
相对定位和绝对定位 ·定位标签:position ·包括属性:relative(相对) absolute(绝对) 1.position:relative; 假设对一个元素进行相对定位.首先它将出如今它 ...
- HTML:相对定位和绝对定位
相信大家一直对前端中的相对定位和绝对定位有些模糊的概论,现在鼠光给大家讲解一下 绝对定位:position:obsolute <p style="position:obsolute&q ...
- 相对定位与绝对定位的理解
一.相对定位:如果对一个元素进行相对定位,它将出现在它所在的位置上,通过设置垂直或水平位置, 让这个元素"相对于"它的起点进行移动.默认相对值是body.注意,在使用相对定位时,无 ...
- 西门子S7-1200控制四轴伺服程序案例 内容涵盖伺服,步进点动,回原,相对定位,绝对定位,速度模式控制
西门子S7-1200控制四轴伺服程序案例: 1.内容涵盖伺服,步进点动,回原,相对定位,绝对定位,速度模式控制!特别适合学习伺服和步进的朋友们!PTO伺服轴脉冲定位控制+速度模式控制+扭矩模式: 2. ...
最新文章
- Python Qt GUI设计:QLineEdit和QTextEdit文本框类(基础篇—13)
- python主要运用于-python主要应用领域有哪些?看这一篇就够了
- SVG 基本绘图方法总结
- SQL Server索引进阶第六篇:书签
- protocol buffer介绍(protobuf)
- go mysql recover_golang recover后怎么返回
- php+easyui+上传文件,easyui 上传文件代码
- html自动加https,http自动跳转https的配置方法
- java 中violate_Java中的Volatile关键字
- 推荐算法 php SQL,MixPHP 独特的SQL构建方式
- RadonDB - 基于MySQL的云原始分布式数据库,用于构建全局的,可扩展的云服务
- power bi dax_M语言和Power BI中的DAX之间的差异
- 12muduo_base库源码分析(三)
- 关于软件测试里面的Fault Error Failure 差别
- Linux 系统故障修复和修复技巧
- 关于Oracle RAC基本概念
- 光猫超级账号密码、宽带账号密码 获取
- linux嵌入式工控机编程,Linux嵌入式工控机的特点
- Ubuntu查询MAC地址,硬盘个数和类型,序列号,CPU数量,命令行查询网卡速率
- mysql模糊搜索 like_Mysql必知必会(3):模糊查询(LIKE)
热门文章
- Android 8.0 PictureInPicture 画中画模式分析与使用
- vim: 根据编程语言自动选择不同的colorscheme
- 第一次做项目经理总结_最适合当项目经理的人已遁入空门
- Tensorflow 2.x(keras)源码详解之第九章:模型训练和预测的三种方法(fittf.GradientTapetrain_steptf.data)
- oracle缓冲等待块,CSS_Oracle数据库buffer busy wait等待事件, 当会话意图访问缓冲存储 - phpStudy...
- C++_OpenCV不通过SDK打开摄像头
- 第一次微信小游戏调试
- odoo13 qweb td 中的上下及水增居中问题
- DEDE整站动态化或整站静态化设置方法
- 网站缺失Flash导致显示、上传等异常的解决方法及浏览器相关功能说明