<!DOCTYPE html>
<html>
<head>
<title>Overlay text over img</title>
<style>
p{
position:absolute;
top: 80px;
left: 80px;
color: white;
}
</style>
</head>
<body>
<img src="../images/finnish.jpeg" alt="Clean">
<p>Clean</p>
</body>
</html>
我的问题是，为什么人们把img和文本放在html中的div中，然后在css中，他们把img的位置设置为相对，把文本(在本例中是p(的位置设置成绝对。我尝试了上面的代码，在没有将img设置为相对的位置的情况下，它仍然有效。有人能为我解释一下人们为什么这么做吗？
当您设置position: absolute时，元素的位置是根据它找到的位置相对的第一个元素来设置的。所以，如果你不设置它，它可能会崩溃。