Question

我通过CSS3的z-index属性，它有四个属性，auto，number，inline和inherit。我理解数字和内联，但自动和继承会将我混淆为自动平均值＆＃34;将值设置为父值的默认值＆＃34;和继承意味着＆＃34;继承父母的价值＆＃34;。我用谷歌搜索，但没有真正理解它。

Answer 1

z-index不是继承的;每个元素的默认值为auto。如果您将其更改为inherit，那么它将直接从其父级获取值。

关键是auto不会创建新的本地堆叠上下文，而inherit，如果父项具有任何数值，则确实如此。auto

请查看此示例以更好地理解。您可以看到相同的DOM结构是重复的。在第一种情况下，div inherit位于inherit之前，而另一位则位于z-index: <number>之前;它倒了。

您可以看到auto值的作用与实际设置z-index: -1等于父级相同，而.inherit是默认值，不会创建新的堆叠顺序，只会按照DOM上确定的默认z顺序显示。如果您将父值设为-1，则继承将与.auto上的$('#button0').click(function(e){ $('.parent').css('z-index', '0'); }); $('#button1').click(function(e){ $('.parent').css('z-index', '1'); }); $('#button-1').click(function(e){ $('.parent').css('z-index', '-1'); });完全相同，使其显示在两个div上的.parent{ position: relative; z-index: 1; } .parent > div{ position: absolute; } .auto{ z-index: auto; /* default value */ } .inherit{ z-index: inherit; } /* --------------------- */ /* presentational styles */ .auto{ background: green; } .inherit{ top: 100px; background: red; } .parent{ width: 200px; height: 200px; opacity: 1; margin: 10px; background: yellow; display: inline-block; } .parent > div{ width: 100px; height: 100px; opacity: 0.95; color: #fff; }后面。

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
  first auto and then inherit on DOM
  <div class="auto">auto</div>
  <div class="inherit">inherit</div>
</div>

<div class="parent">
  first inherit and then auto on DOM
  <div class="inherit">inherit</div>
  <div class="auto">auto</div>
</div>

<div>
  <label>Change z-index of parent</label>
  <button id="button-1">To -1</button>
  <button id="button0">To 0</button>
  <button id="button1">To 1</button>
</div>

＆＃13;

addFooterView

＆＃13;

<plugin>
    <groupId>org.raml.plugins</groupId>
    <artifactId>raml-jaxrs-maven-plugin</artifactId>
    <version>1.3.4</version>
    <dependencies>
        <dependency>
            <groupId>org.raml</groupId>
            <artifactId>raml-parser-2</artifactId>
            <version>1.0.0</version>
        </dependency>
    </dependencies>
</plugin>

＆＃13;

有关MDN https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

的更多信息

Answer 2

如果元素'a'是元素'b'的子元素，那么元素'b'被称为父元素。如果元素'b'的z-index是5.0，元素'a'的z-index被设置为继承，元素'a'也将有z-index 5.0。这就是继承的含义。

d-index＆s;自动与CSS3中继承的差异

2 个答案: