Question

我正在尝试将div放在位置：在div中修复位置：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

transform：skewY（-10deg）translate（0px，-101px）; 要么顶部：-170px;

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

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

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

谢谢！

Answer 1

默认情况下，转换发生在元素的 center 中。你的歪斜是从中心扭转元素，导致左侧下降，右侧上升。

设置transform-origin: top left（如果您愿意，可以设置为0 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;，则固定位置元素相对于该变换元素定位。

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

2 个答案: