CODEWITHSUNDEEP
cssmedia-queriescss-positionfixed
Mike Schmidt
Mike Schmidt

Reputation: 321

Position fixed changing with changing device widths

Some weird stuff is happening with a position:fixed element.

When the viewport is at width 760px, the fixed position element seems to inherit position:absolute. Instead of it taking top:5em, botttom:5em from the viewport. It extends to the whole page. If an element has position fixed it shouldn't matter what position a parent element has, right? Why is this happening?

I have several media queries that affect some of the parent divs, but should this affect a positon:fixed element.

You can see it here when you click on "Click for More Info".

Upvotes: 2

Views: 81

Answers (1)

jsea
jsea

Reputation: 4037

When looking at your code in Chrome's developer tools, I noticed that when I disable the following CSS code, the fixed position sizing works as expected again.

-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);

-webkit-transition: -webkit-transform 500ms ease;
-moz-transition: -moz-transform 500ms ease;
-o-transition: -o-transform 500ms ease;
transition: transform 500ms ease;

-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;

This is inside the .csstransforms3d.csstransitions.js-ready #inner-wrap properties inside the @media screen and (max-width: 47.5em) query of style.css.

Upvotes: 1

Related Questions