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

需求

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

测试

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

相对定位

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%;

}

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

绝对定位

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%;

}

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

总结

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

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

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

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

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

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

最新文章

热门文章