要实现变体 3,您必须对您的课程进行以下更改。
这是小提琴。
CSS 的变化:
.with-after {
border: 1px solid green;
height: 50px;
padding: 0 93px;
position: absolute;
right: 480px;
z-index: -1;
}
您必须使主要课程,即在您的情况下获胜,才能拥有绝对位置。这将删除它的流,并且通过 z-indexing 它将位于垂直滚动的下方。希望这可以帮助。
逻辑:
就像我之前说的,你不能通过为主类设置一个 position:relative 和为同一个类的伪元素设置 postion:absolute 来欺骗 CSS。因此,为了达到使 div 位于垂直滚动下方的效果,您必须为必须位于父元素下方的类定义 position:absolute。因此,定义具有不同位置的同一类的 psudo 将不利于浏览器识别您想要的内容,并且会通过结合伪元素类和实际元素类来表现怪异,因此使其对浏览器知道你想要什么,将主要的 with-after 类声明为 position:absolute 并让浏览器简单地知道它必须在具有负 z-index 的父元素下方。希望这对现在有所帮助。