Gibt es eine Möglichkeit, alles so zu positionieren, dass die Elemente (z. B. Text/Bilder) überlagert werden können?
Beispielsweise:
<body>
<header>
<div class="navbar">
</div>
</header>
<div class="class1">image</div>
<div class="class2">text</div>
<div class="class3">text</div>
</body>
Ich möchte, dass der Text der Klasse 2 und der Klasse 3 über dem Bild angezeigt werden. In diesem Format erscheinen sie jedoch nur unter dem Bild.
Ich habe versucht, die Klasse 2 und die Klasse 3 in die Klasse 1 einzufügen
<body>
<header>
<div class="navbar">
</div>
</header>
<div class="class1">image
<div class="class2">text</div>
<div class="class3">text</div>
</div>
</body>
Dies empfand ich jedoch als sehr lästig. Jedes Mal, wenn ich in Klasse 1 etwas Neues hinzufüge, wird die ganze Seite verschoben.
Auch wenn position: relative; and position: absolute;dies behoben wird, funktioniert es nicht, wenn ich versuche, ein Element über die gesamte Seite selbst anzuzeigen (außerhalb von Klasse 1 - geht zum Ende der Seite). Ich versuche, so etwas wie dieses https://www.w3schools.com/howto/howto_js_alert.asp auf meiner ganzen Seite erscheinen zu lassen.
Ich habe versucht, das with- position: relative;und das Alert-Meldungsfeld als 'position: absolute;' festzulegen, aber dies hat nichts gebracht. Könnte bitte jemand ein paar Vorschläge machen? Vielen Dank!
Ich bin mir nicht sicher, was Sie brauchen, aber vielleicht ist Ihr Bedarf so:
.class1 {
position: relative;
background-image: url("https://images.sftcdn.net/images/t_app-cover-l,f_auto/p/ce2ece60-9b32-11e6-95ab-00163ed833e7/260663710/the-test-fun-for-friends-screenshot.jpg");
background-size: contain;
background-repeat: no-repeat; height: 100px;
width: 100px;
}<body>
<header>
<div class="navbar">
</div>
</header>
<div class="class1">
<div class="class2">text2</div>
<div class="class3">text3</div>
</div>
</body>Dieser Artikel stammt aus dem Internet. Bitte geben Sie beim Nachdruck die Quelle an.
Bei Verstößen wenden Sie sich bitte [email protected] Löschen.
Lass mich ein paar Worte sagen