使元素不占用任何空间

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; } body { overflow: hidden; }恐怕不是选项，因为页面变得无法滚动。 我知道我可以和jQuery一起破解一些东西，但是如果可能的话，我更喜欢使用html和css的解决方案。

图2

图3

Answer 1

您是否尝试过absolute position容器？

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