html - 正确的定位拒绝工作

Question

目前我正在为我的网站开发一项功能，其中三个圆圈过渡到 900 像素的新配置。我有圈子在工作，他们都很敏感，这很好。

我的计划是在 900px 时每个圆圈将转换为新的配置。

蓝色圆圈circle2将在左侧，洋红色圆圈 circle1将在右边和黄色圆圈circle3将直接位于circle1 之间下方 和居中和 circle2 .我能够实现过渡 circle1和 circle2到 left和 circle3到 bottom .

我遇到的问题是当我尝试 transition circle3到 right与circle1居中和 circle2不管我做什么circle3将不会向右移动。这可能是因为我有 relative定位设置为 circle1我是extending与 scss 的所有其他圈子。

我认为我的问题与 this post 有关在正确的定位拒绝申请。

有人可以向我解释为什么 right定位属性拒绝工作？？

请查看我的Codepen

@mixin transitions {
  transition: top .5s linear, bottom .5s linear, left .5s linear, right .5s linear;
}

.circles {
   display: flex;
   justify-content:center;
}
 .circle1 {
    display: flex;
    position: relative;
    justify-content:center;
    border-radius:50%;
    padding-bottom:30%;
    height:0;
    width: 30%;
    margin:5px;
    background-color:magenta;
    right:0;
    left:0;
    top:0px;
    bottom:0px;
    @include transitions;

  #projects{
    line-height:1;
    margin-top:-0.5em;
    padding-top:50%;
    color:#fff;
   }
 }

从 1 扩展的第 2 和第 3 圈

.circle2{
  @extend .circle1;
  background-color:blue;
  #about{
    @extend #projects;    
  }
}
.circle3{
  @extend .circle1;
  background-color:gold;
  #contact{
    @extend #projects;
  }
}

媒体查询设置为 900px

@media (max-width: 900px) {
  .circle3 {
    right: 100px;
    top: 200px;
  }

  .circle2 {
    left: 350px;
  }

  .circle1, .circle2, .circle3 {
    left: 100px;
  }
}

Answer 1

看起来你的@extended 调用一直被尊重到你的断点，这意味着应用于 circle1 的所有样式都被应用于 circle 2 和 circle 3。

加上 circle1 样式是最后一个在断点处定义的样式，导致它覆盖了其他两个样式的定位。您只需将 .circle1 样式放在断点内其他两个样式之上即可解决此问题。

@media (max-width:900px){
  .circle1{
    left:100px;
  }
  .circle3{
    right:100px;
    top:200px;
  }

  .circle2{
    left:350px;
  }
}