今天又朋友问绝对定位和相对定位问题,做了代码演示给他,记录一下,给还在为绝对定位相对定位犯晕的童鞋们。
首先摆脱专业术语,用自己的话,理解下概念:
定位:定位有四个,包括上(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定位方式,可以得到不同的显示。
图解如下:
相对定位解释图:
绝对定位解释图: