Question

使用此原始代码：https://codepen.io/marcelo-ribeiro/pen/xOOKpO。我们在屏幕的每个角落放置了4个div，当点击任何div时，会有一个转换显示div进入全屏。

&:first-child {
    top: 0;
    left: 0;
    background: nth($section-colors, 1);
}

&:nth-child(2) {
    top: 0;
    left: 50%;
    background: nth($section-colors, 2);
}

&:nth-child(3) {
    top: 50%;
    left: 0;
    background: nth($section-colors, 3);
}

&:nth-child(4) {
    top: 50%;
    left: 50%;
    background: nth($section-colors, 4);
}

我想编辑布局，因此当宽度在800px下变化时它会响应。所以现在布局应该有四个div，每个div叠加在一起：https://codepen.io/anon/pen/QmMMJN

@media (max-width:800px) {
    .#{$section-class} {
        width: 100%;
        height: 25%;

        &:first-child {
            top: 0;
            left: 0;
        }

        &:nth-child(2) {
            top: 25%;
            left: 0%;
        }

        &:nth-child(3) {
            top: 50%;
            left: 0;
        }

        &:nth-child(4) {
            top: 75%;
            left: 0%;
        }
    }
}

但是对于新布局的新定位，转换无法正常工作，因为div不会扩展到点击之前的div。

任何想法为什么？

Answer 1

特异性和级联。

媒体查询中的规则优先于$section-expanded-class规则，因此top会保留其原始值（0,25％，50％，75％）。

懒惰的修复方法是在笔的第47行添加！important，以便它接管。

&.#{$section-expanded-class} {
    top: 0 !important;
    left: 0;
    z-index: 1000;
    width: 100%;
    height: 100%;
  }

响应性转换和改变绝对位置

1 个答案: