正確定位拒絕工作

Question

目前我正在爲我的網站開發一個功能，其中三個圓圈轉換爲900px的新配置。我有這些圈子可以工作，他們都很好迴應。

我的計劃是在900px每個圈子將轉變爲新的配置。

藍色圓圈circle2將上左，品紅色圓circle1將在權利和黃色圓圈circle3會直接下方和circle1和circle2之間居中。我能夠實現過渡circle1和circle2到left和circle3到bottom。

我遇到的問題是，當我試圖transitioncircle3到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; 
    } 
} 

圈2和3正在從1

.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的所有樣式正在應用於圓2和圓3.

這與在斷點處定義的最後一個circle1樣式相結合導致它重寫其他兩個的定位。您可以通過簡單地將您的.circle1樣式放置在斷點內的其他兩個樣式來解決此問題。

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

    .circle2{ 
    left:350px; 
    } 
}