Position fixed left property not working from the browser left inside multiple positions properties

Question

Hi I have below html and css code where .first .second .third elements css coming dyanamically from plugings and .fourth element is adding later on click which having css of position:fix and left:0 but now because of parent css there are multiple position properties are already added that's why left property taking from the container instead of taking from the browser. Any way to achieve this?

.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>

What is the expected output? you want the 4th div to move completely left? — Manjuboyz, Apr 15 '20 at 14:56
this is due to the transform. The duplicate talks about filter but I am listing all the propertirs doing the same at the bottom of the answer — Temani Afif, Apr 15 '20 at 15:00
@Manjuboyz exactly that's what I want I want to left 0 to browser — Sagar Kodte, Apr 16 '20 at 07:08
@TemaniAfif filter transform ref backdrop-filter ref perspective ref contain ref transform-style ref will-change how can these properties to help to move last div completely left — Sagar Kodte, Apr 16 '20 at 07:26
no one of the properties will help your to move. The duplicate is explaining why you *cannot* move it because you have the transform property that you need to remove — Temani Afif, Apr 16 '20 at 08:02
Thanks for the help. I'm using reactjs will check another solution to implement this functionality — Sagar Kodte, Apr 16 '20 at 08:12
@TemaniAfif ohh by removing transform it works, Thanks learnt something new. — Sagar Kodte, Apr 16 '20 at 08:38

Position fixed left property not working from the browser left inside multiple positions properties

0 Answers0