snoopy_15
snoopy_15

Reputation: 1313

Position fixed doesn't work inside relative position, CSS

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!

Upvotes: 1

Views: 1164

Answers (2)

Brandon
Brandon

Reputation: 39182

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

Upvotes: 1

mooiamaduck
mooiamaduck

Reputation: 2156

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.

Upvotes: 0

Related Questions