关于相对定位与绝对定位的区别
之前一直搞不明白html中positon:relative; 和 position:absolute;这两个属性。这里记录一下。
理论解释:
相对定位:该元素相对于自己原有位置,偏移一定距离。相对的是自己。
绝对定位:该元素相对于其父元素,偏移一定距离。相对的是父元素,重点是这个父元素也需要是设置了position属性。从最近的父元素开始找,直到找到body位置为止。
好吧,光看理论解释可能有点懵逼,还是来个小demo吧,直观。。。
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;}
运行后效果如下:
ok了,相对定位就是这样啦,需要注意的是,p1虽然偏移了,但是同时它还占着它原来的位置。
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左上角的原因。
关于相对定位与绝对定位的区别相关推荐
- Web前端,CSS常用之相对定位和绝对定位的区别,静态定位、子绝父相、固定定位、元素的层级关系的了解
前言 持续学习总结输出中,今天分享的是Web前端,CSS常用之相对定位和绝对定位的区别,静态定位.子绝父相.固定定位.元素的层级关系的了解 1.定位的基本介绍 我们的网页常见布局方式有:标准流.浮动. ...
- CSS相对定位和绝对定位的区别
CSS中相对定位和绝对定位常常会使初入的新人感到困惑,我本人也是深受其害!今天详细的给大家说一下相对定位和绝对定位的区别,也是对自己的一种复习. 一.相对定位 position: relative; ...
- html相对定位 不占位置,相对定位与绝对定位的区别 相对定位是以当前位置为基准计算的...
div的相对定位和绝对定位是什么意思,什么区别啊? 有位老兄说学习div+css的div布局必须学会相对定位和绝对定位 小弟初学不相对定位和绝对定位是定位的两种表现形式,区别如下: 一.主体不同 相对 ...
- 关于相对定位和绝对定位的区别
在我们进行编程的过程中时常会用到position:relative和position:absolute,分别是相对位置和绝对位置.许多的人不清楚其中的区别.让我们了解一下. relative: 1.r ...
- html中的相对和绝对定位,实例讲解CSS中相对定位和绝对定位的用法和区别
一.相对定位 相对定位是指,该元素相对自己原来位置,偏移一定距离,元素可以通过顶部top,底部bottom,左侧left和右侧right属性来设置定位.它相对的是它自己. 举例:大div里面包含5个小 ...
- html相对定位 不占位置,CSS position 相对定位和绝对定位
一.position 的四个值:static.relative.absolute.fixed. 绝对定位:absolute 和 fixed 统称为绝对定位 相对定位:relative 默认值:stat ...
- css定位(相对定位和绝对定位)
文章目录 前言 一.定位是什么? 二.如何开启定位 1.相对定位 2.绝对定位 总结 前言 随着前端课程的学习,我们从浮动来到了定位,同样都是布局所需要用到的方法,那么有什么区别呢?设置定位又有什么要 ...
- css定位详解(相对定位、绝对定位和固定定位)
文章目录 一.什么是定位? 二.各个属性值的作用 1.相对定位 2.绝对定位 3.静态定位 4.固定定位 三.相对和绝对定位 1.相对定位 2.绝对定位 3.相对定位和绝对定位 (1)相对定位 (2) ...
- WEB学习 -相对定位、绝对定位、固定定位、z-index
相对定位 相对定位,就是微调元素位置的.让元素相对自己原来的位置,进行位置调整. 2.不脱标,老家留坑,形影分离也就是说相对定位不脱标,真实位置是在老家,只不过影子出去了,可以到处飘.3.相对定位用途 ...
最新文章
- k means聚类算法_一文读懂K-means聚类算法
- Android ViewPager嵌套ViewPager滑动冲突处理方法
- git的简单操作命令
- WCF 调用webservice
- BZOJ3170: [Tjoi2013]松鼠聚会 - 暴力
- 为什么要使用叶脊(leaf-spine)拓扑网络zz
- 小程序搜索框_微信小程序搜索及优化相关知识科普
- 关于游戏排行榜设计开发的一些总结
- Kali2.0——ssh使用
- 收购 GitHub 滔天争议后,微软回应一切
- morphogenesis —— 形态发生
- 委托作为参数传递时,可以直接传入方法名称
- 软考高项笔记 | 大数据
- 通过Cmd窗口按照指定浏览器打开网页
- 国内高防云服务器哪家好?选高防云服务器必看
- 康托尔三分集是不可列集的证明
- matlab 2013至2016 32bit、64bit破解版集合 百度云盘下载
- 每天五分钟机器学习:评价算法模型常用的数值评估方式——F1值
- 文本分析--NLTK自然语言处理
- 手机html5活体检测,手把手教你做实时活体检测系统
热门文章
- android屏幕适配,生成不同分辨率的dimen.xml文件
- java json to csv_最简单的JS实现json转csv的方法
- 陈南峰质量讲堂2—— 产品质量管理体系之间的关系
- xutils3使用方法
- 史蒂芬周博客打不开怎么办?
- 一文搞定R语言拟合p值、R方...
- Excel每隔n个文本添加一个逗号将文本隔开的操作
- oracle 内存 无法启动数据库,database - 无法启动Oracle数据库(处理系统参数失败) - 堆栈内存溢出...
- 如何用python进行电话骚扰_打游戏被女朋友骚扰?看我用Python自动回复
- Warning: Can‘t perform a React state update on an unmounted component. This is a no-op, but it indic