组合使用的时候，父级元素相对定位设置具体定位方向的时候，为什么会让定位元素无法正常设置定位方向？
霸气的擎宇
2016-06-25 15:08
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
div{
border:solid 2px red;
width:400px;
height:200px;
position:relative;
top:20px;
left:10px;/*当这里设置right的时候，下面注释的地方就不可以再设置right，只可以设置LEFT，反之，只可以设置right，为什么？？？*/
}
div.div1{
position:absolute;
width:30%;
height:30%;
border-color:blue;
top:10px;left:10px;
}
div#div2{
position:absolute;
right:10px; /*为什么这里 可以设置左，当设置右的时候就没有效果,比如此时单单改动RIGHT的值的情况下，试试看？*/
top:20px;
height:30%;
width:35%;
border-color:green;
}
</style>
</head>
<body>
<p>hahahhahahaha</p>
<div>
<div class="div1"></div>
<div id="div2"></div>
</div>
</body>
</html>
说的不是很清楚，左右的是这样，从而引申出上下方向的问题。
这到底是为什么？？？
5回答
-
- 霸气的擎宇
- 2016-07-15 17:38:50
我找到答案了，布局是从左到右，从上到下解析的，css是属性是层叠继承的，#div2中虽然能改right，但是div下面有left,width已经定位了基本形状，所以在改right就不起作用了。div2如果改成right:30px;，它继承了div样式的left:50;但是又定宽，会优先走left，right被忽略
div2如果改成right:30px;并且width:auto，那么他就会左50，右30，自动布局。
所以也就解释了为什么上面设置right 下面不管左右都有效。而上面left的时候下面右就无效
-
- 大块吃肉188
- 2016-07-02 10:51:06
我在慕课网的代码区试了 确实是可以的，div设置为right #div2的right改变的时候绿框确实可以相对父级div移动的
-
- 若离殇
- 2016-06-28 00:07:09
我是可以的，不知道你为什么不行。换个浏览器试试？
-
- songbiao
- 2016-06-27 11:44:36
我可以啊
-
- qq_柯九思_0
- 2016-06-25 15:16:01
你要看一下的div 是什么 顶级的div 你把顶级的div 给他一个id 或者class 命名就行了， 以后不能犯那么低级错误
初识HTML(5)+CSS(3)-升级版
1225809 学习 · 18234 问题
相似问题