html - 位置固定的左侧属性在多个位置属性中左侧的浏览器中不起作用

Question

嗨，我有下面的 html 和 css 代码，其中.first .second .third元素 css 来自插件和.fourth元素，稍后在单击时添加具有 css 的元素position:fix，left:0 但现在由于父 css 已经添加了多个位置属性，这就是为什么左属性取自容器而不是从浏览器中获取。有什么办法可以做到这一点？

.first {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1300;
    position: fixed;
}
.second {
    left: auto !important;
    transform: scale(1) !important;
    right: 0;
    width: 25%;
    border-radius: 0;
    min-height: 90vh;
    outline: none;
    position: absolute;
    min-width: 16px;
    max-width: calc(100% - 32px);
    overflow-y: auto;
    overflow-x: hidden;
    max-height: calc(100% - 32px);
}
.third {
    padding: 8px 1px 0;
    height: 92vh;
    overflow-y: auto;
    position: relative;
    overflow-x: hidden;
    background:blue;
}
.fourth{
    background:red;
    position: fixed;
    left: 0;
    bottom: 0px;
    z-index: 9999;
    width: 400px;
    transition: 1s all;
}

<div class="first">
<div class="second">
<div class="third">
<div class="fourth">
<p>Fourth Div</p>
</div>
</div>
</div>
</div>

标签： htmlcss