Question

目前我正在为我的网站制作一个功能，其中三个圆圈转换为900px的新配置。我有圈子工作，他们都响应，这是好的。

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

蓝色圆圈circle2位于左侧，洋红色圆圈circle1位于右侧和黄色圆圈{{ 1}}将在circle3和circle1之间直接位于下方居中。我能够将circle2和circle1转换为circle2和left转换为circle3。

我遇到的问题是当我尝试bottom transition circle3以right和circle1为中心时，无论如何我circle2 不会向右移动。这可能是因为我circle3的{{1}}定位设置为relative，我circle1所有其他圈子都是scss。

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

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

请查看我的Codepen

right

从@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; } }

扩展的第2和第3圈

媒体查询设置为900px

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

Answer 1

您的@extended调用似乎一直受到断点的影响，这意味着应用于circle1的所有样式都应用于圆圈2和圆圈3.

加上circle1样式是断点处定义的最后一个样式会导致它覆盖其他两个样式的定位。你可以通过简单地将.circle1样式放在断点上的其他两个样式来解决这个问题。

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

  .circle2{
    left:350px;
  }
}

正确的定位拒绝工作

1 个答案: