Positions Fixed Doesn't Work When Using -Webkit-Transform

Why position fixed doesn't work as expected?

Remove transform property from body and it will work

body { transform: scale(1.0); }

and remove bottom from .social and add something like top:100px; instead of bottom:600px;

.social { top: 100px; }

position: fixed doesn't work on chrome/firefox mobile mockup (and mobile), but works when I resize window

This is kind of late but I solved it a while back adding this line to the <head> of the html document

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1"/>

seems the minimum-scale-1 is the crucial part.

Position Fixed Doesn't Work

When you give position: fixed the element rendering isn't considered when rendering other elements on the page. You have to givepadding-top for your body, so that it doesn't overlap with the header.

For your site example, try these:

#topmenu {
  position: fixed;
  width: 1000px;
  z-index: 100;
  overflow: none;
  left: 50%;
  margin-left: -500px;
}

z-index not working with fixed positioning

This question can be solved in a number of ways, but really, knowing the stacking rules allows you to find the best answer that works for you.

Solutions

The <html> element is your only stacking context, so just follow the stacking rules inside a stacking context and you will see that elements are stacked in this order

The stacking context’s root element (the <html> element in this case)

Positioned elements (and their children) with negative z-index values (higher values are stacked in front of lower values; elements with the same value are stacked according to appearance in the HTML)

Non-positioned elements (ordered by appearance in the HTML)

Positioned elements (and their children) with a z-index value of auto (ordered by appearance in the HTML)

Positioned elements (and their children) with positive z-index values (higher values are stacked in front of lower values; elements with the same value are stacked according to appearance in the HTML)

So you can

set a z-index of -1, for #under positioned -ve z-index appear behind non-positioned #over element
set the position of #over to relative so that rule 5 applies to it

The Real Problem

Developers should know the following before trying to change the stacking order of elements.

When a stacking context is formed
- By default, the <html> element is the root element and is the first stacking context
Stacking order within a stacking context

The Stacking order and stacking context rules below are from this link

When a stacking context is formed

When an element is the root element of a document (the <html> element)
When an element has a position value other than static and a z-index value other than auto
When an element has an opacity value less than 1
Several newer CSS properties also create stacking contexts. These include: transforms, filters, css-regions, paged media, and possibly others. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
As a general rule, it seems that if a CSS property requires rendering in an offscreen context, it must create a new stacking context.

Stacking Order within a Stacking Context

The order of elements:

The stacking context’s root element (the <html> element is the only stacking context by default, but any element can be a root element for a stacking context, see rules above)
- You cannot put a child element behind a root stacking context element
Positioned elements (and their children) with negative z-index values (higher values are stacked in front of lower values; elements with the same value are stacked according to appearance in the HTML)
Non-positioned elements (ordered by appearance in the HTML)
Positioned elements (and their children) with a z-index value of auto (ordered by appearance in the HTML)
Positioned elements (and their children) with positive z-index values (higher values are stacked in front of lower values; elements with the same value are stacked according to appearance in the HTML)

position: fixed doesn't work on iPad and iPhone

I ended up using the new jQuery Mobile v1.1: http://jquerymobile.com/blog/2012/04/13/announcing-jquery-mobile-1-1-0/

We now have a solid re-write that provides true fixed toolbars on the
a lot of popular platforms and safely falls back to static toolbar
positioning in other browsers.

The coolest part about this approach is that, unlike JS-based
solutions that impose the unnatural scrolling physics across all
platforms, our scrolling feels 100% native because it is. This means
that scrolling feels right everywhere and works with touch, mousewheel
and keyboard user input. As a bonus, our CSS-based solution is super
lightweight and doesn’t impact compatibility or accessibility.

Position Fixed not working when CSS Filters applied on same element in Microsoft Edge

It is a bug, ms-edge-rendering-problem-of-css-filter, should have been fixed but obviously not.

Here is a workaround, where you still can use position: fixed and the image and filter is set using the :after pseudo-element.

body {  height: 5000px;}
.fixed {  position: fixed;  left: 0;  height: 100%;  width: 100%;}.fixed:after {  content: ' ';  position: absolute;  left:0;  top: 0;  height: 100%;  width: 100%;  background-image: url(https://lh5.googleusercontent.com/-REJ8pezTyCQ/SDlvLzhAH-I/AAAAAAAABeQ/mC1PXNiheJU/s800/Blog_background_750.gif);  background-repeat: repeat;  background-attachment: fixed;  -webkit-filter: brightness(70%);  -moz-filter: brightness(70%);  -o-filter: brightness(70%);  filter: brightness(70%);}

<div class='fixed'></div>