web-dev-qa-db-ja.com

ボーダーのZ-index

境界にz-indexを追加する方法を探していましたが、z-indexが見つからないので、ここで質問します。

親divを持つdivがあるとします。親に境界線があり、その境界線を子divに重ねたいが、親にそれを重ねたくない。

cssborderz-index
16
ItsNotAbyss

ボーダーでそれを行うことはできません。

興味深いことに、あなたはcanoutline

* {
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>

その他のオプション

疑似要素の使用

1。ボーダー付きの疑似要素

Nudgeを所定の位置に変換するためにいくつかの追加の変換が必要です。

* {
  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。 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

疑似要素のスタイルボーダー

  1. より高いz-indexの場合は、疑似要素を使用します。 ::before
  2. 下のdivと対話できるようにする-疑似要素でpointer-events: none;を使用します（ spec を参照）

コードの重要な部分：

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

完全な例： https://codepen.io/Michal-Miky-Jankovsky/pen/QoXbLz

2
Michal Miky Jankovský

必須「ソリューションAでこれを解決したいと思います。ソリューションAは悪いです。代わりにソリューションBを使用します。」

要するに、私はお勧めします：

  1. 疑似要素：

    A. .my-div searched-element:nth-of-type(1)（つまり、searched-elementはpまたはh1またはdivになります）

    B. :first-child

    C. :first-of-type

    D. :last-child

  2. margin-top: -10px子が上に移動するように

    そして、私がお勧めする実際のソリューションは、:first-child疑似クラスのバリアントで子の負の上部マージンを使用しています。

具体的には、実際には、すべての子divでボーダーをborder-topからborder-bottomに切り替えてから、そのスコープ内で:last-childを使用する方が簡単であることがわかりました。

0
T.Woody