Wie kann ich ein Kinderelement mit Überlauf einem Elternteil entkommen lassen: versteckt, ohne mein Layout zu brechen? ⇐ CSS

[Anonymous]

Ich arbeite an einem Layout, in dem das übergeordnete Element die folgenden Eigenschaften hat:

Code: Select all

.parent {
position: relative;
height: 350px;
border: 1px solid #ddd;
border-radius: 8px;
overflow: hidden;
display: flex;
justify-content: flex-end;
align-items: center;
}

Das Elternteil enthält ein untergeordnetes Element (ein oder ), und ich möchte, dass dieses Kind durch Verwendung negativer Margen oder Positionierung visuell die Grenzen des Elternteils verwendet wird. Überlauf entfernen: Hidden auf dem übergeordneten, da das Entfernen des Entwurfs anderer Elemente auf der Seite, z. B. Bilder oder Container, durchbricht.

Code: Select all

activity name

und Kind CSS:
.child {
position: absolute;
padding: 5px 10px;
min-width: 50%;
color: #fff;
background: rgb(255, 145, 0);
top: 0;
right: -15px;
z-index: 1;
border-radius: 10px 0 0 10px;
font-weight: bolder;
}
< /code>
Derzeit ist das untergeordnete Element geschnitten und erscheint nicht außerhalb des übergeordneten. /> Was ich suche, ist eine Möglichkeit zu: < /p>

Erlauben Sie dem Kind, dem Elternteil zu entkommen und außerhalb seiner Grenzen zu erscheinen. Das?