绝对定位后元素的宽高如果用百分比表示的计算方法

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/HansExploration/article/details/80735110
.big{
	padding-right: 100px;
	padding-bottom: 100px;
	width: 0;
	height: 0;
	background: yellow;			
	margin-top: 100px;
	margin-left: 100px;
}
.inner {
	width: 50%;
	height: 50%;
	background: black;			
}
<div class="big">
	<div class="inner">			
	</div>
</div>

正常情况下innerbox的宽高根据父元素的宽高进行百分比运算,即为0。

当innerbox添加了absolute绝对定位后,如果父元素且所有祖先元素没有进行定位,其宽高百分比将根据浏览器可视宽高进行计算。


.big{
	padding-right: 100px;
	padding-bottom: 100px;
	width: 0;
	height: 0;
	background: yellow;			
	margin-top: 100px;
	margin-left: 100px;
	position: relative;
}
.inner {
	width: 50%;
	height: 50%;
	background: black;	
	position: absolute;		
}

如果其父元素进行了定位,宽高则根据父元素的盒子宽高(content + padding)(不含border!)进行百分比计算。


                                    
展开阅读全文

没有更多推荐了,返回首页