Position fixed doesn't work inside relative position, CSS

Question

I'm trying to put div with position:fixed inside div with position:relative.

This is CSS:

#wrapper {
    background-color: #199eaf;
    height: auto;
    left: 0;
    min-height: 100%;
    position: relative;
    text-align: left;
    top: 0;
    width: 100%;
}

.menu-space {
    background: #fff none repeat scroll 0 0;
    height: 174px;
    left: 0;
    overflow: hidden;
    padding: 43px;
    position: fixed;
    top: 0;
    transform: skewY(-10deg);
    width: calc(100% + 100px);
    z-index: 800;
}

This for some reason doesn't work as I expect. My div goes inside next div in #wrapper div (See screenshot: http://www.awesomescreenshot.com/image/445294/fb3d41bfb92a0f76d60266ed0ac4f0a9 ) I can make this work just if I use one of this two solution for .menu-space div

transform: skewY(-10deg) translate(0px, -101px); or top: -170px;

But I really don't want to use those minus values. Can someone please help me to find better solution?

This is how menu should look http://www.awesomescreenshot.com/image/445297/e799ee584ead6007b9fe16628ccc15bc

and on scroll: http://www.awesomescreenshot.com/image/445300/cee6600490bab7e58a479da23ac9974a

Thank you!

Answer 1

By default, transforms happen from the center of the element. Your skew is twisting the element from its center, causing the left side to drop and the right side to rise.

Set transform-origin: top left (or 0 0 if you prefer) and you can get rid of the negative top or translate.

.menu-space {
   background: #fff none repeat scroll 0 0;
   height: 174px;
   left: 0;
   overflow: hidden;
   padding: 43px;
   position: fixed;
   top: 0;
   transform: skewY(-10deg);
   transform-origin: top left;
   width: calc(100% + 100px);
   z-index: 800;
}

See MDN

Answer 2

The reason for this is the transform: skewY(-10deg); . As per the W3C spec, if position: fixed; is used on an element inside an element with a transformation applied to it, the fixed-position element is positioned relative to that transformed element.