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{
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;
border: 1px solid blue;
}
#inner{
width: 300px;
margin属性值可以为百分比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。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。