使元素不占用任何空间

Question

我想创建一个显示在某些元素上的对角线条而不是页面上的其他元素（参见图1）。

图1

我尝试通过

这样的方式来做到这一点

#diagonal-bar {
    position: absolute;
    z-index: 50;
    width: 300px;
    height: 150%;
    -*-transform: rotate(10deg);
}

.over {
    z-index: ..
}

.under {
    z-index: ..
}

我的内心愿景是让页面看起来像图2，也就是说，对角线延伸到页面之外，但它会被“裁剪”掉。结果是，由于position: absolute;属性，body元素延伸到#diagonal-bar的高度，如图3所示。是否有某种方法可以使元素具有元素不占用任何空间，即使它在那里？ fixed和absolute位置属性之间的某种混合。

我害怕添加body { overflow: hidden; }不是一个选项，因为页面变得不可滚动。我知道我可以和jQuery一起破解一些东西，但是如果可能的话我更喜欢使用html和css的解决方案。

图2

图3

Answer 1

您是否尝试过position容器absolute ly？

例如。 https://jsfiddle.net/0xv7vygd/