如何理解CSS定位中“正确”和“底部”的行为？

Question

请检查这个小提琴

https://jsfiddle.net/manuchadha/rc0dxog1/12/

bottom和right在CSS中如何工作，如以下示例所示？它们似乎没有任何作用。

HTML

<div id="div3"> top left bottom right div</div>

CSS-此CSS根据top和left移动div。右侧和底部无效。

div#div3 {
  width:100px;
  height:100px;
  background-color:#eaf;
  position:relative;  
  top:50px;
  left:50px;
  right:50px;
  bottom:50px;

}

此CSS将div按预期方式上移。

div#div3 {
  width:100px;
  height:100px;
  background-color:#eaf;
  position:relative;  
  right:50px;
  bottom:50px;
}

但是此CSS似乎比top和left拥有bottom和right优先级。

div#div3 {
  width:100px;
  height:100px;
  background-color:#eaf;
  position:relative;  
  right:50px;
  bottom:50px;
  top:50px;
  left:50px;
}

如果我在CSS中提供所有四个属性-top，left，bottom，right，会有什么预期的行为？我只能指定right或left中的一个，还是bottom或top中的一个吗？

Answer 1

您应该保存top的呼叫left right bottom和position: absolute

尝试致电margin-right和margin-bottom

Answer 2

使用position:relative不能一次指定所有四个。实际上，这仅在您使用position:absolute时才有意义。

relative的意思是“将元素相对垂直和水平移动一定量到其正常位置”。如果您同时指定left:10px和right:10px，那是什么意思？浏览器应该将元素向左还是向右移动？不清楚。因此，实际上，一个规则只是被忽略了。

看看MDN's article on CSS position：

  

除了刚刚描述的情况（绝对位置的元素填充了可用空间）

     

  
• 如果同时指定了顶部和底部（技术上不是自动），则顶部获胜。
  
• 如果同时指定了左和右，则当方向为ltr（英语，水平日语等）时，左方获胜；当方向为rtl（波斯语，阿拉伯语，希伯来语等）时，右方获胜。