csstop定位百分⽐，关于cssposition定位top百分⽐的问题
css设置绝对定位后 top,bottom，设置百分⽐定位是按⽗元素的⾼度来计算的，同样left,right，设置百分⽐定位是按⽗元素的宽度度来计算的margin属性值可以为百分比
.box{ background: #66E6FF; width: 100%; height:400px; position: relative; margin: 0 auto; }
.pox{ background: #f0f; width:100px; height: 100px; position: absolute; top:20%; right: 20%; z-index: 99999}
如果⽗元素设置有padding值 则⼦元素定位 top的'百分⽐'值是 其⽗元素的height加上padding-top和padding-bottom
.box{ background: #66E6FF; width:500px; height:300px;padding: 20px; position: relative; margin: 0 auto; }
.pox{ background: #f0f; width:100px; height: 100px; position: absolute; top:20%; right: 20%; z-index: 99999}
如果⽗元素设置有border值,⼦元素 top定位的位置是根据⽗元素的宽度来定位的，与边框⽆关 并且top的百分⽐是⽗元素的宽度，⽗元素边框不予计算
.box{ background: #66E6FF; width:500px; height:300px; border:20px solid yellow; position: relative; margin: 0 auto; }
.pox{ background: #f0f; width:100px; height: 100px; position: absolute; top:0px; right: 20%; z-index: 99999}
其⽗元素边框的不予计算

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