Question

我有一个包含CSS3列的页面，我试图将一个伪元素放置在与内联元素相同的Y位置，但是在固定的X位置（在左边距中）。这在第一列上很有用，但其他列中的其余伪元素表现不正常。

最终发生的事情是伪元素沿着左边距放置，如果它在单个列中，则元素将位于该边缘。如果向下滚动，您将看到左侧的绿色块，如果它位于单个列中，则会显示文本。

我喜欢的是绿色块位于存在的文本行左边的列间隙区域。

我猜测问题就在于这段代码：

.marker:after {
    content: ' ';
    display: block;
    white-space: nowrap;
    position: absolute;
    left: 0px;
    width: 0;
    height: 0;
    border: 6px solid green;
}

JSFiddle：http://jsfiddle.net/o0xu0e2x/1/

注意：我的应用程序仅需要Chromium 41+支持，因此这就是我使用-webkit标签的原因。使用伪元素：在/之后无关紧要，它们都是这样的。

Answer 1

您需要相对定位父.section元素。

这样做时，绝对定位的伪元素将相对定位到.section元素而不是窗口。

Updated Example

.section {
    position: relative;
}

CSS3列和伪元素定位

1 个答案: