Wie erstelle ich eine Randüberlagerung für ein verschachteltes Element, ohne Z-Index zu verwenden?

Erstellen von Randüberlagerungen für verschachtelte Elemente

Bei dieser Programmieranfrage besteht die Aufgabe darin, ein bestimmtes Layout mit einer Randüberlagerung auf einem verschachtelten Element zu replizieren Element. Die HTML-Struktur und anfängliche CSS-Stile werden bereitgestellt, es wird jedoch nach einer Lösung ohne Verwendung von Z-Index gesucht.

Um dies zu erreichen, sollten Sie die Verwendung von Pseudoelementen zum Generieren des Rahmens in Betracht ziehen. Diese Technik bietet eine bessere Kontrolle über die Positionierung und Abmessungen des Rahmens:

body {
  background: grey;
}

.button {
  background: #94c120;
  width: 200px;
  height: 50px;
  margin: 50px;
  position: relative;
}

.button:before {
  content: "";
  position: absolute;
  top: -15px;
  left: -15px;
  width: 100%;
  height: 100%;
  border: 5px solid #fff;
  box-sizing: border-box;
}

Im bereitgestellten HTML kann das Schaltflächenelement aktualisiert werden, um diesen Ansatz zu verwenden:

<div class="button">
  some text
</div>

Diese Lösung erstellt das gewünschte Randüberlagerung, ohne dass zusätzliches Markup oder Manipulation des Z-Index erforderlich ist. Durch die Nutzung von Pseudoelementen können Entwickler eine präzise Kontrolle und Anpassung von Rahmenstilen innerhalb verschachtelter Elemente erreichen.

Das obige ist der detaillierte Inhalt vonWie erstelle ich eine Randüberlagerung für ein verschachteltes Element, ohne Z-Index zu verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!