Question

所以我试图将我的伪元素放置在绝对位置，但是相反，它的行为就像它的父对象是其他东西一样。

<!DOCTYPE html>
<html>
<head>
<style>
p::after { 
content: " - Remember this";
position: absolute;
top: 0;
}
</style>
</head>
<body>

<div style="position: absolute; top: 50px; left: 50px; border: 1px solid 
black;">
<p>My name is Donald</p>
<p>I live in Ducksburg</p>

<p><b>Note:</b> For this selector to work in IE8, a DOCTYPE must be declared, 
and you must use the old, single-colon CSS2 syntax (:after instead of 
::after).</p>
</div>

</body>
</html>

我从w3school +一些编辑中得到了该信息，因为我需要确保不仅仅是导致该问题的html。

我想要的是让伪元素使用p标签作为其父元素而不是div

Answer 1

具有以下位置的元素：绝对；相对于最近的祖先（而不是相对于视口

w3schools example here

My Example here

echo

Answer 2

绝对定位元素必须由相对父元素包含。

请参见example from w3c，通过从父元素中删除position: relative来进行操作。运行它，您将看到它如何弄糟。

此示例来自w3cschools的the main position article。

添加

p { 
  position: relative;
}

应解决此问题。

:: before和:: after位置绝对像位置固定

2 个答案: