web-dev-qa-db-fra.com

Index Z sur les bordures

J'ai cherché un moyen d'ajouter un z-index aux bordures, mais je n'arrive pas à en trouver un, alors j'ai pensé demander ici.

Disons que j'ai un div avec un parent div. Le parent a une bordure et je veux que cette bordure chevauche la division enfant mais je ne veux pas que le parent la chevauche.

cssborderz-index
16
ItsNotAbyss

Vous ne pouvez pas faire cela avec une bordure.

Fait intéressant, vous pouvez le faire avec un 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>

Autres options

Utilisation de pseudo-éléments

1. Pseudo-élément avec bordure

Nécessite quelques transformations supplémentaires pour placer Nudge en place.

* {
  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-élément avec 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>
22
Paulie_D

bordure de style sur pseudo-élément

  1. pour un z-index supérieur, utilisez un pseudo-élément, par exemple. ::before
  2. pour pouvoir interagir avec div under - utilisez pointer-events: none; sur le pseudo-élément (voir spec )

partie importante du code:

.parent {
    position: relative;
    ...
}
.parent::before {
    pointer-events: none;
    position: absolute;
    border: 1px solid #000;
    ...
}

exemple complet: https://codepen.io/Michal-Miky-Jankovsky/pen/QoXbLz

2
Michal Miky Jankovský

Obligatoire "Je vois que vous voulez résoudre ce problème par la solution A. La solution A est mauvaise. Voici la solution B à la place."

Bref, je recommanderais:

  1. Pseudo-éléments:

    A. .my-div searched-element:nth-of-type(1) (c'est-à-dire searched-element serait p ou h1 ou div)

    B. :first-child

    C. :first-of-type

    RÉ. :last-child

  2. margin-top: -10px tel que l'enfant sera déplacé vers le haut

    Et la vraie solution que je recommanderais utilise la marge supérieure négative de l'enfant avec quelques variantes du :first-child pseudo-classes.

Pour mon cas en particulier, j'ai en fait trouvé plus facile de changer mes bordures de border-top à border-bottom sur toutes les divisions enfant, puis utilisez :last-child dans ce cadre.

0
T.Woody