固定位置在相对位置内不起作用，CSS

Question

我正在尝试将div与position：固定在div与position：relative之间。

这是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;
}

由于某些原因，这不符合我的预期。 我的div在#wrapper div中进入下一个div（请参见屏幕快照： http ://www.awesomescreenshot.com/image/445294/fb3d41bfb92a0f76d60266ed0ac4f0a9），即使我对.menu-space div使用了这两种解决方案之一，也可以使这项工作有效

转换：skewY（-10deg）translation（0px，-101px）; 或顶部：-170px；

但是我真的不想使用这些负值。 有人可以帮我找到更好的解决方案吗？

这是菜单的外观http://www.awesomescreenshot.com/image/445297/e799ee584ead6007b9fe16628ccc15bc

并滚动显示： http : //www.awesomescreenshot.com/image/445300/cee6600490bab7e58a479da23ac9974a

谢谢！

Answer 1

默认情况下，变换从元素的中心发生。 您的歪斜使元素从其中心开始扭曲，导致左侧下降，右侧上升。

设置transform-origin: top left （或0，如果您愿意），您可以摆脱负顶或平移。

.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;
}

见MDN

Answer 2

这样做的原因是transform: skewY(-10deg); 。 根据W3C规范，如果position: fixed; 在对元素应用了变换的元素内部的元素上使用时，固定位置元素相对于该变换的元素定位。