css "fixed" child element positions relative to parent element not to the viewport, why? [duplicate]

Question

I'm developing a wordpress theme, with an isotope grid and where a hover on a post should display its title with a fixed position on the bottom of the browser. I have this simplified structure:

<div id="main">
    <article class="hubbub">
        //article content
    <h2 class="subtitled">
        //h2 content
    </h2>
    </article>
</div>

Via jQuery, a hover on <article> should display its child element h2.subtitled. <article> is positioned relative, but gets an absolute position by the isotope script. The h2.subtitled is positioned fixed with:

.subtitled {
            display: none;
            position: fixed;
            z-index: 999999999;
            bottom: 20px;
            left: 0;
            width: 100%;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 42px;
            text-align: center;
            color: yellow;
}

For some reason, the h2.subtitle elements get positioned fixed related to the parent <article> element, so an the bottom of each <article>. If I set the <h2> outside of the <article>, it is positioned fixed related to the browser, but they need to be inside of the <article> element, because an infinite scroll appends the new <article> elements and they should as well contain the <h2> titles.

Does anyone know, how to make this position fixed and related to the browser window?

Thanks!

Octopod

Position fixed always atach the element in relation to the viewport so you maybe have another script or css overriding the fixed position – Khufu

Yeah, I'm hitting the same thing. Despite all assurances to the contrary, "position: fixed" is positioning one of my elements based on a parent element, NOT the viewport. I'd very much like to know 1) why this is happening and 2) how I can make it stop. – Straphanger

Answer 1

FWIW, when I ran into this, the problem turned out to be a parent div with -webkit-transform: translate3d(0, 0, 0) in its CSS. Apparently, this is a known source of potential mayhem in child elements with position: fixed.

For what I was trying to do (turning fixed on and off as a way of sticking a key nav element to the top of the page as it scrolled by), the solution was to append it to the page body element when it was time to hold it in place and sticking it back in its wrapper div when it wasn't. No idea if any of this would have helped the OP, but if you're chasing this bug yourself, worth looking into.

Straphanger

Here is a proof of concept demonstrating this annoyance: codepen.io/markdebeer/pen/qrBDm – Greataunt

OMG thanks...this was driving me INSANE....turns out I did add a transform...its not just the 3d, but I was using translate Y...removed it and fixed acts like its supposed to. I wonder when they are going to fix this because I feel like I have seen this before a while back...its just a pain because I use top:50% and translateY(-50%) to vertically center.... – Gamelan

wow, thanks for this answer. I had the same problem. I needed to add translate3d because of a chrome background-color rendering bug (yuck). Of course it's causing more problems now haha – Remark

Experienced this same issue on Chrome 67 and for me it was caused by the parent having a will-change: transform property. – Lohengrin

Amazing, the issue is still there as of August 2018 – Possie

Issue is still here, ALL major browsers; when I use iScroll plug in (that uses translate) and place an element with fixed position inside of it, the element is still displayed relatively to (some of the) parent(s) – Itself

Funny thing, if they fix it in browsers, CSS on some of my pages will crack like a bomb :D – Itself

They will probably not fix it, because "For elements whose layout is governed by the CSS box model, any value other than none for the transform results in the creation of both a stacking context and a containing block. The object acts as a containing block for fixed positioned descendants." – Itself

contain: strict on the parent also causes this issue :| – Alarm

The problem is also there if a parent has container-type: inline-size. – Elbe

having filter: invert(1) on the parent breaks this too – Borlow

Answer 2

Remove the transform property from the parent of the fixed element.

For some reason this causes the fixed element to become relative to the parent instead of the document.

Codepen example.

Holeandcorner

Answer 3

In case there are other people who have been running into this mess and don't have a transform property, the value of a properly that has blur() also causes this to mess up.

This was such a pain point for me. Too much time wasted of figuring this one out. :(

Feat

Answer 4

In my case, the parent element doesn't have a transform property but filter: drop-shadow(...) which caused the same problem. Removing the filter solved the problem.

Grammarian

I've been fighting the same bug recently. drop-shadow completely changed behaviour of fixed elements inside it. Had to drop it as I couldn't find any solution. – Baranowski