html - 使元素不占用任何空间

Question

我想创建一个对 Angular 线条，它显示在页面上的某些元素上而不是其他元素上(见图 1)。

图1

我尝试通过类似的方式来做到这一点

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

.over {
    z-index: ..
}

.under {
    z-index: ..
}

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

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

图2

图3

Answer 1

您是否尝试过绝对定位容器？

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