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

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 的元素嵌套在其他绝对元素中。在大多数情况下，这是不必要的。

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

How do I add a border over this heading and paragraph element?

html

css

border