scss中子元素继承父元素属性怎么消除？

Question

使用css代码使红色盒子定位定在左下角，且两个子盒子仍然按着普通流的方式排版

<style>
        .one{
            position: absolute;
            left: 0;
            bottom: 0;
            width: 500px;
            height: 500px;
            background-color: red;
        }

        .two{
            width: 50px;
            height: 50px;
            background-color: #000;
        }

        .th{
            width: 200px;
            height: 200px;
            background-color: orange;
        }
    </style>

     <div class="one">
        <div class="two"></div>
        <div class="th"></div>
    </div>

但当我写为scss代码时，却发生了错误

    #action{
        position: absolute;
        bottom: 100px;
        left: 0;
        height: 150px;
        width: 200px;
        background-color: red;

        .hide{
            width: 40px;
            height: 100%;
            background-color: orange;
        }

        .panel{
            height: 100%;
            width: 156px;
            background-color: rgb(46, 187, 209)
        }

    }


<div id="action">
        <div class="hide">
        </div>
        <div class="panel">
        </div>
    </div>

黄色的小盒子压住了蓝色盒子的一部分，然后查看问题所在发现是黄色盒子继承了红色盒子的position:absolute，请问这是怎么回事呢？

Answer 1

css的属性继承也是隐式的，也不会说在一个元素上写了样式，结果跑到别的元素上去了，这种情况应该想到是不是在哪里写了.hide的这个样式，把这里的样式污染了