需求

页面需要实现自适应布局，因此使用百分比计算

测试

页面主要使用相对定位和绝对定位，主要从这2方面进行比对测试

相对定位

<style>html, body {margin: 0;padding: 0;}#wrapper{width: 1000px;height: 1000px;border: 1px solid green;position: relative;}#middle{width: 600px;height: 600px;border: 1px solid blue;}#inner{width: 300px;height: 300px;border: 1px solid red;position: relative;top: 10%;}
</style><div id="wrapper"><div id="middle"><div id="inner"></div></div>
</div>

此时top换算成像素为60px，即相对定位使用百分比的时候，参照的是最近一层父元素的高度

绝对定位

<style>html, body {margin: 0;padding: 0;}#wrapper{width: 1000px;height: 1000px;border: 1px solid green;position: relative;}#middle{width: 600px;height: 600px;border: 1px solid blue;}#inner{width: 300px;height: 300px;border: 1px solid red;position: absolute;top: 10%;}
</style>
<div id="wrapper"><div id="middle"><div id="inner"></div></div>
</div>

此时top换算成像素为100px，即绝对定位使用百分比的时候，参照的是最近一层父元素的高度，但父元素不能是static定位；若父元素是static定位，则会一直往上一级查找，直至查询到整个网页的根元素html

总结

top(bottom) left(right)在相对定位中使用百分比时，参照的是最近一层父元素的高度与宽度；

top(bottom) left(right)在绝对定位中使用百分比时，参照的是最近一层父元素的高度与宽度，但父元素不能是static定位；若父元素是static定位，则会一直往上一级查找，直至查询到整个网页的根元素html。

CSS相对定位和绝对定位使用百分比的计算逻辑相关推荐

html如何用百分比绝对定位,CSS相对定位和绝对定位使用百分比的计算逻辑
需求页面需要实现自适应布局,因此使用百分比计算测试页面主要使用相对定位和绝对定位,主要从这2方面进行比对测试相对定位 html, body { margin: 0; padding: 0; } ...
CSS相对定位和绝对定位详解
CSS相对定位和绝对定位详解如果,说浮动, 关键在一个 "浮" 字上面, 那么我们的定位,关键在于一个 "位" 上. PS: 定位是我们CSS算是数一数二难 ...
CSS相对定位和绝对定位的区别
CSS中相对定位和绝对定位常常会使初入的新人感到困惑,我本人也是深受其害!今天详细的给大家说一下相对定位和绝对定位的区别,也是对自己的一种复习. 一.相对定位 position: relative; ...
详解div+css相对定位和绝对定位用法
1.定位的专业解释: (1)语法 position:static|absolute|fixed|relative 从上面语法可以看出,定位的方法有很多种,它们分别是静态(static),绝对定位(ab ...
前端——css相对定位，绝对定位，固定定位
文章目录相对定位 position: relative; 特性用途绝对定位 position: absolute; 绝对定位参考点单独盒子绝对定位参考点: 父辈元素设置了相对定位,则子元素绝对 ...
div+css相对定位和绝对定位
今天突然发现自己在布局的时候思路很乱,于是毅然决然的想要重新的理一下自己的布局思路,今天就先从定位开始吧~ 绝对定位(absolute):将被赋予此定位方法的对象从文档流中拖出,如果对象的父级没有设置 ...
css 相对定位与绝对定位
相对定位的规律: 使用相对定位的盒子,会相对于它原来的位置,通过偏移指定的距离,到达新的位置. 使用相对定位的盒子仍在标准流中,它对父亲和兄弟盒子都没有任何影响. 绝对定位的规律: 使用绝对定位的盒子 ...
Css相对定位和绝对定位实现CSDN标题栏
2019独角兽企业重金招聘Python工程师标准>>> 实现效果鼠标放置到图标上实现过程 1.用css画三道横线,这里用到了CSS3 background-clip 属性实现方 ...
css的相对定位和绝对定位
css标签的相对定位和绝对定位是通过position属性来控制的,相对定位和绝对定位不改变元素的大小形状,只改变元素的位置. 一.position属性的值有以下几种: static:默认值,没有定位, ...

CSS相对定位和绝对定位使用百分比的计算逻辑

需求

测试

相对定位

绝对定位

总结

CSS相对定位和绝对定位使用百分比的计算逻辑相关推荐

最新文章

热门文章