Próbuję dodać granicę wokół elementu nagłówka i akapitu, ale nie działa. Te elementy znajdują się wewnątrz Div, ale granica nie tworzy. Jak to naprawić?

.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>
0
Pranav Borse 15 kwiecień 2021, 09:12

2 odpowiedzi

Najlepsza odpowiedź

Usunięłem pozycję: absolutnie z kodu i działa. Jeśli używasz pozycji Absolute, upewnij się, że masz rodzic z pozycją: krewny. Staraj się również unikać elementów zagnieżdżających z pozycją: bezwzględny wewnątrz innych absolutów. To tylko niepotrzebne w większości przypadków.

1
Oleg Nesterov 15 kwiecień 2021, 06:22

Usuń position: absolute z pozycji i akapitu.

.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>
2
Prateek Goyal 15 kwiecień 2021, 06:17