Question

据我了解，::before伪将创建一个节点作为其所属元素的第一个子节点。我正在尝试添加::before元素，该元素应位于main元素下方，但它在其上方进行渲染，与主要内容重叠。据我了解，它将呈现为：

<div id="c">
<div id="pseudo-before">
</div>
Main text
</div>

并且，如果我需要在主要内容下放置::before伪，则只需分别为父级和子级设置z-index。我尝试设置它，但是它不起作用。我想我对它的工作方式一无所知，请帮忙-如何使::before或::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>

::在将伪内容显示在主要内容之上之前

0 个答案: