Szukałem sposobu na dodanie z-indeksu do granic, ale nie mogę go znaleźć, więc pomyślałem, że o to zapytam.Indeks Z na granicach
Powiedz, że mam div z div jednostki nadrzędnej. Element nadrzędny ma ramkę i chcę, aby ta granica nakładała się na element div, ale nie chcę, aby element nadrzędny pokrywał się z nią.
Nie można tego zrobić z obramowaniem.
Co ciekawe jednak, ty może zrobić z outline
* {
box-sizing: border-box;
}
.parent {
width: 200px;
height: 200px;
margin: 25px auto;
position: relative;
background: #bada55;
border:12px solid #663399;
outline: 12px solid red;
padding:25px
}
.child {
width: 220px;
height: 100px;
background: lightblue;
}<div class="parent">
<div class="child"></div>
</div>Inne opcje
Korzystanie pseudo-elementy
1. Pseudoelement z ramką
Wymaga kilku dodatkowych przekształceń, aby przesunąć na miejsce.
* {
box-sizing: border-box;
}
.parent {
width: 200px;
height: 200px;
margin: 25px auto;
position: relative;
background: #bada55;
padding: 25px;
}
.child {
width: 220px;
height: 100px;
background: lightblue;
}
.absolute::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
border: 12px solid red;
}<div class="parent absolute">
<div class="child"></div>
</div>2. Pseudo-element z box-shadow
* {
box-sizing: border-box;
}
.parent {
width: 200px;
height: 200px;
margin: 25px auto;
position: relative;
background: #bada55;
padding: 25px;
}
.child {
width: 220px;
height: 100px;
background: lightblue;
}
.shadow::after {
content: '';
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
box-shadow: 0 0 0 12px red;
}<div class="parent shadow">
<div class="child"></div>
</div>pozycja: względna; dzięki pracy –
Dziękuję Paulie_D - wspaniała odpowiedź – Meli
Nie można tego zrobić. Dlaczego nie możesz ustawić granicy na div dziecka? Jest na pewno sposób na osiągnięcie pożądanej wydajności. Proszę rozwinąć swoją prośbę o więcej szczegółów. – Alberto