55

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!

DaniP
  • 37,813
  • 8
  • 65
  • 74
R4ttlesnake
  • 1,661
  • 3
  • 18
  • 28
  • Position `fixed` always atach the element in relation to the viewport so you maybe have another script or css overriding the fixed position – DaniP Jan 13 '14 at 13:13
  • 1
    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. – BlairHippo Jul 25 '14 at 19:38

4 Answers4

135

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.

BlairHippo
  • 9,502
  • 10
  • 54
  • 78
  • 1
    Here is a proof of concept demonstrating this annoyance: http://codepen.io/markdebeer/pen/qrBDm – BlueCaret Jan 12 '15 at 22:20
  • 13
    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.... – carinlynchin Jan 01 '16 at 19:37
  • 1
    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 – Jan Oct 20 '16 at 21:45
  • 3
    Experienced this same issue on Chrome 67 and for me it was caused by the parent having a `will-change: transform` property. – Norman Breau Jun 20 '18 at 15:55
  • 4
    Amazing, the issue is still there as of August 2018 – Giannis Dallas Aug 16 '18 at 15:15
  • 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) – Dalibor Aug 31 '18 at 12:02
  • Funny thing, if they fix it in browsers, CSS on some of my pages will crack like a bomb :D – Dalibor Aug 31 '18 at 12:35
  • 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." – Dalibor Aug 31 '18 at 12:47
  • 3
    `contain: strict` on the parent also causes this issue :| – REJH Dec 24 '19 at 13:23
  • The problem is also there if a parent has `container-type: inline-size`. – Mjaustro Oct 19 '22 at 11:13
16

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.

Alex
  • 503
  • 4
  • 7
6

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

Marzieh Bahri
  • 554
  • 7
  • 20
MakeThatMoney
  • 79
  • 1
  • 3
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.

Marzieh Bahri
  • 554
  • 7
  • 20
  • 1
    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. – Sharak Dec 11 '20 at 03:24