                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /初识HTML(5)+CSS(3)-升级版

关于本节我们可以这样理解的疑问

position：relative不是相对于本元素之前所处的位置进行定位的吗？为什么感觉这个理解里面是相对于父元素。其次，left::-50%是不是可以理解为向左移动了50%啊？看这个解释要看晕了，如果有说错的地方希望大家帮我纠正一下，顺便帮我解惑。谢谢大家～

浮生散记_03544675

2016-06-28

源自：初识HTML(5)+CSS(3)-升级版 15-7

关注问题我要回答

411

操作

收起

3 回答

_我亦飘零
2016-07-02

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>relative样式</title>
<style type="text/css">
#div1{
    width:200px;
    height:200px;
    border:2px red solid;
    position:relative;
    left:50%;    
}
#div2{
    width:10px;
    height:10px;
    border:2px blue solid;
    position:relative;
    left:-50%;
    top:50%
}
body{border:2px solid;height:500px;}

</style>
</head>
<body>
	<div id="div1"><div id="div2"></div></div>
</body>
</html>

给你个代码，你自己试着修改，边改边看。

说下我的理解，主要是有以下几点：

1、子元素初始位置是在父元素的“左上角”

2、子元素用“%”方式移动时，移动距离是“父元素的百分之N”，举个例子：上面代码里面作为子元素的div2，其中“left：-50%”这句通俗的解释是“子元素div2初始位置（父元素的左上角）向左移动 半个父元素（即半个div1）那么大”

新人，有不正之处望前辈指出，共勉，谢。

0 回复有任何疑惑可以回复我~

收起回答

_我亦飘零

补充一下，习题中有这么一段代码 .container ul{ list-style:none; margin:0; padding:0; position:relative; left:-50%; 对于“left：-50%”这句来说，本意是“子元素移动半个父元素单位”，由于这段代码中有两句代码将“padding”和“margin”的值都设置成了“0”，这样子元素跟父元素就一样大了，“子元素移动半个父元素单位”等于“子元素移动半个自身单位”。大概是这么个意思，里面可能还涉及到边框自身的距离让我忽略了，但是意思应该没错，我也在这里纠结很久。