如何在此标题和段落元素上添加边框

Question

我试图在标题和段落元素周围添加一个边框，但它不起作用。这些元素在div中，但边界没有形成。我该如何解决这个问题？

.box1{

border: 3px solid black;
border-radius: 4px;
position: absolute;
}
.WorldWideWeb{
left: 80px;
top: 135px;
font-size: 20px;
color: black;
position: absolute;
}
.worldwidewebp{
left: 80px;
top: 185px;
font-size: 15px;
color: black;
position: absolute;
max-width: 70ch;
}

<div class= "box1">
<h2 class="WorldWideWeb">Introduction to the World Wide Web (WWW)</h2>
<p class="worldwidewebp"><u>What is the Web and how does it work?</u><br>blah blah blah</p>
</div>

Answer 1

从标题和段落中删除position: absolute。

.box1{
display: block;
border: 3px solid black;
border-radius: 4px;
position: absolute;
}
.WorldWideWeb{
left: 80px;
top: 135px;
font-size: 20px;
color: black;
}
.worldwidewebp{
left: 80px;
top: 185px;
font-size: 15px;
color: black;
max-width: 70ch;
}

<div class= "box1">
<h2 class="WorldWideWeb">Introduction to the World Wide Web (WWW)</h2>
<p class="worldwidewebp"><u>What is the Web and how does it work?</u><br>blah blah blah</p>
</div>

Answer 2

我已经从代码中删除了position:absolute，它可以工作。如果使用的是position absolute，请确保您有一个position:relative的父对象。此外，尽量避免在其他绝对值中嵌套position:absolute元素。在大多数情况下，这是不必要的。