深入理解position的相对绝对定位与百分比的关系

 

今天又朋友问绝对定位和相对定位问题,做了代码演示给他,记录一下,给还在为绝对定位相对定位犯晕的童鞋们。

首先摆脱专业术语,用自己的话,理解下概念:

定位:定位有四个,包括上(top)下(bottom)左(left)右(right),不指明的前提下默认为左上角。然后以坐标轴的方式,右下是正,左上是负。我们要知道,top、bottom、left 、right的百分比,都是相对于父容器的宽度来说的。

绝对定位(absolute):相对于相对定位(relative)元素的位置而言,如没有相对定位元素,则找到顶层body。

相对定位:相对定位元素的定位都是相对于自己本身的位置而言,这是非常重要的

看测试代码(后面有图解):

css:

.box{
    float:left;
    position:relative;
    left:50%;
    border:1px solid red;
    width:400px;
}
.con{
    float:left;
    position:relative;
    width:300px;
    right:50%;
    border:1px solid blue;
}

html:

<body>
<div class="box">
    <div class="con">123456</div>
</div>
</body>

js(验证div位置):

<script>
document.write(document.body.clientWidth);
	document.body.onclick=function(eve){
		var e =eve || window.event ;
		var x = e.clientX; 
		var y = e.clientY;
		alert("x:"+x+"\ny:"+y)
	}
</script>


将以上代码放在编辑器中并且修改left和right值,以及position定位方式,可以得到不同的显示。

图解如下:

 

相对定位解释图:

 


 

绝对定位解释图:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值