据我所知,
::before
pseudo应创建一个节点作为其所属元素的第一个子节点。我想补充一下
前:
元素,位于主元素之下,但它呈现在主元素之上,与主内容重叠。据我所知,它将被描述为:
<div id="c">
<div id="pseudo-before">
</div>
Main text
</div>
如果我需要
前:
伪主内容下,我只需要分别为父和子设置z索引。我试着设置它,但它不起作用。我想我不明白它是怎么工作的,请帮忙-怎么做
前:
或
::after
待展示
在下面
它们所属元素的内容?
谢谢你
一个解释(按要求):我需要将代码片段的红色框放在绿色框的下方,但在包含div和body的上方,我不能这样做。请告诉我怎么做。
#c
{
position: absolute;
top: 1em;
left: 1em;
width: 20em;
text-align: justify;
border: 1px solid #000;
background: #0f0;
padding: 1em;
width: 20em;
display: inline-block;
font-family: helvetica, arial, sans-serif;
z-index: 100;
}
#c::before
{
content: "";
position: absolute;
top: 1em;
bottom: -1em;
width: 5em;
background: rgba(255,0,0,.5);
z-index: 0;
}
<div id="b">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Scelerisque in dictum non consectetur a. Non diam phasellus vestibulum lorem sed risus. Id diam maecenas ultricies mi eget mauris pharetra et. Aliquam nulla facilisi cras fermentum odio eu. Urna neque viverra justo nec ultrices dui. Eget aliquet nibh praesent tristique magna sit. Diam in arcu cursus euismod quis. Justo eget magna fermentum iaculis. Ipsum nunc aliquet bibendum enim. Arcu risus quis varius quam quisque id diam vel quam. Porta nibh venenatis cras sed felis eget velit aliquet. Odio ut enim blandit volutpat maecenas volutpat. Ut placerat orci nulla pellentesque dignissim enim sit. Aliquet sagittis id consectetur purus. Vulputate sapien nec sagittis aliquam. Pellentesque elit eget gravida cum sociis natoque penatibus et magnis. Facilisis mauris sit amet massa vitae tortor condimentum. Porttitor massa id neque aliquam vestibulum morbi.
<div id="c">
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.
</div>
</div>
