Использование непрозрачности для изменения порядка укладки

может ли кто-нибудь объяснить, почему непрозрачность оказывает какое-либо влияние на укладку
html элемент ?

Соответствующая часть кода CSS:

    div:first-child{
        opacity: 0.99;
    }
    .red{
        background: red;
        z-index: 1;
    }
    .green{
        background: green;
        margin: 20px 0 0 20px;
    }
    .blue{
        background: blue;
        margin: 40px 0 0 40px;
    }

обычный HTML:

<div>
  <span class="red"></span>
</div>
<div>
  <span class="green"></span>
</div>
<div>
  <span class="blue"></span>
</div>

Я изучаю z-индекс, он казался довольно простым, пока я не столкнулся с этим исключением, где он, похоже, не влияет на порядок укладки После добавления непрозрачности, может ли кто-нибудь объяснить значение непрозрачности в этом конкретном контексте?

1 ответ

  1. МОДЕРНИЗИРОВАТЬ

    См. Фрагмент 2

    • Для тогоz-index, чтобы быть любого использования, элемент должен иметь один из следующих:
      • position:absolute
      • position:relative
      • position:fixed

    • opacity работает по шкале от 0 до 1, поэтому имеет а .99 бесполезно.

    • <span>s inlineэлементы и не начинаются с какой-либо видимой ширины или высоты, поэтому для того, чтобы действительно увидеть любой фон, вам нужно дать им некоторые размеры (т. е. высоту и ширину) или содержание (т. е. текст внутри них). Это также помогает, если вы назначаетеdisplay:inline-block, потому что работа с display:inlineне является интуитивным.

    В фрагменте 1 я добавил то, что ранее было упомянуто в вашем коде.

    В сниппете 2 я сделал интерактивную демонстрацию, показывающую z-indexи opacityштабелирующую отношения.

    Фрагмент 1

    div:first-child {
      opacity: 0.2;
    }
    .red {
      position: relative;
      background: red;
      z-index: 1;
    }
    .green {
      position: relative;
      background: green;
      margin: 20px 0 0 20px;
    }
    .blue {
      position: relative;
      background: blue;
      margin: 40px 0 0 40px;
    }
    span {
      display: inline-block;
      width: 100px;
      height: 20px;
    }
    <div>
      <span class="red"></span>
    </div>
    <div>
      <span class="green"></span>
    </div>
    <div>
      <span class="blue"></span>
    </div>

    Фрагмент 2

    document.getElementById('rng1').oninput = function() {
      var rad = document.querySelectorAll('.rad:checked')[0];
      var out = rad.nextElementSibling.id;
      document.getElementById(rad.value).style.opacity = this.value;
      document.getElementById(out).value = this.value;
    }
    #parent {
      position: relative;
      width: 480px;
      height: 200px;
      border: 3px dashed grey;
      background: rgba(0, 0, 0, .2);
      text-align: right;
    }
    fieldset {
      width: 450px;
    }
    div {
      position: absolute;
      width: 300px;
      height: 150px;
    }
    #A {
      background: tomato;
      z-index: 10;
      text-align: left;
    }
    #B {
      background: cyan;
      z-index: 0;
      text-align: center;
    }
    #C {
      background: yellow;
      z-index: -10;
      text-align: right;
    }
    output {
      width: 30px;
      display: inline-block;
    }
    <section id='parent'>
      <div id='A'>A</div>
      <div id='B'>B</div>
      <div id='C'>C</div>
      Parent
    </section>
    
    <form id='ui'>
      <fieldset>
        <label>
          <input id='radA' class='rad' name='rad' type='radio' value='A' checked>A:
          <output id='oA'></output>
        </label>
        <label>
          <input id='radB' class='rad' name='rad' type='radio' value='B'>B:
          <output id='oB'></output>
        </label>
        <label>
          <input id='radC' class='rad' name='rad' type='radio' value='C'>C:
          <output id='oC'></output>
        </label>
        <label>
          <input id='radD' class='rad' name='rad' type='radio' value='parent'>Parent:
          <output id='oD'></output>
        </label>
        <br>
        <label>Opacity
          <input id='rng1' type='range' min='0' max='1' step='.1' value='1'>
        </label>
      </fieldset>
    </form>