left ,margin-right为什么不能配合使用？

Question

以下代码实现效果，为什么不能搭配不同方位？ direction,margin-derection(反方向),

 .container {
 width: 300px;
 height: 50px;
 border-radius: 10px;
 background-color: lightblue;
 margin: 0 auto;
 position: relative;
 }
 .container::after {
 content: "";
 width: 0;
 height: 0;
 border: 10px solid transparent;
 border-left: 10px solid lightblue;
 position: absolute;
 top: 50%;
 margin-top: -10px;
 right: 0;
 margin-right: -20px;
 }

失效

 top: 50%;
 right: 0;
 margin-bottom: 10px;
 margin-left: 20px;

Answer 1

布局问题，你已经用了绝对布局，调整位置用left,right,bottom,top这四个就足够了