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

最新推荐文章于 2024-06-01 09:36:59 发布

flying_wind2008

最新推荐文章于 2024-06-01 09:36:59 发布

阅读量2k

点赞数 3

CC 4.0 BY-SA版权

分类专栏：百分比 js web前端绝对定位相对定位文章标签： border float class function div html

本文链接：https://blog.youkuaiyun.com/flying_wind2008/article/details/6821800

js 同时被 3 个专栏收录

23 篇文章

订阅专栏

web前端

14 篇文章

订阅专栏

绝对定位

1 篇文章

订阅专栏

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

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

定位：定位有四个，包括上（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定位方式，可以得到不同的显示。

图解如下：

相对定位解释图：