将子元素定位在父元素的父元素之后时，“`z-index“` 不起作用。

huangapple
go评论49阅读模式
英文:

positioning the child behind the parent of the parent element, ```z-index``` does not work

问题

我想让<span>出现在#sideBar的后面，我尝试了z-index: -3，但没有起作用。

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

body {
  margin: 0px;
  font-family: "Signika Negative", sans-serif;
  background-color: #252525;
  color: #f8f9fa;
  user-select: none;
}

#sideBar {
  width: 2vw;
  height: 100vh;
  background-color: rgb(15, 15, 15);
  opacity: .99;
}

.menuBtn {
  background: none;
  cursor: pointer;
  padding: .5vw;
  border: none;
  padding: none;
  color: white;
  font-weight: 600;
  font-size: 1vmax;
}

.menuBtn .label {
  transition: left .5s;
}

.label {
  position: absolute;
  font-size: .9vmax;
  opacity: 1;
  left: -2.2vw;
}

svg {
  transition: transform .5s;
}

.menuBtn:hover svg {
  transform: scale(1.2);
}

.menuBtn:hover .label {
  opacity: 1;
  left: 2.2vw;
}

<!-- language: lang-html -->

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Fira+Mono&amp;family=Signika+Negative:wght@300&amp;display=swap" rel="stylesheet"/>

    <style>
        @import url("https://fonts.googleapis.com/css2?family=Fira+Mono&amp;family=Signika+Negative:wght@300&amp;display=swap");
    </style>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="styles.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>OverStat</title>
</head>

<body>
<div id="sideBar">
        <div class="menuBtn" onclick="clear()"><span class="label" >Clear all games and ranks</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="lightgrey" d="M135.2 17.7C140.6 6.8 151.7 0 163.8 0H284.2c12.1 0 23.2 6.8 28.6 17.7L320 32h96c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 96 0 81.7 0 64S14.3 32 32 32h96l7.2-14.3zM32 128H416V448c0 35.3-28.7 64-64 64H96c-35.3 0-64-28.7-64-64V128zm96 64c-8.8 0-16 7.2-16 16V432c0 8.8 7.2 16 16 16s16-7.2 16-16V208c0-8.8-7.2-16-16-16zm96 0c-8.8 0-16 7.2-16 16V432c0 8.8 7.2 16 16 16s16-7.2 16-16V208c0-8.8-7.2-16-16-16zm96 0c-8.8 0-16 7.2-16 16V432c0 8.8 7.2 16 16 16s16-7.2 16-16V208c0-8.8-7.2-16-16-16z"/></svg></div>

        <div class="menuBtn"><span class="label">Prefrences</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="lightgrey" d="M0 416c0-17.7 14.3-32 32-32l54.7 0c12.3-28.3 40.5-48 73.3-48s61 19.7 73.3 48L480 384c17.7 0 32 14.3 32 32s-14.3 32-32 32l-246.7 0c-12.3 28.3-40.5 48-73.3 48s-61-19.7-73.3-48L32 448c-17.7 0-32-14.3-32-32zm192 0a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zM384 256a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zm-32-80c32.8 0 61 19.7 73.3 48l54.7 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-54.7 0c-12.3 28.3-40.5 48-73.3 48s-61-19.7-73.3-48L32 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l246.7 0c12.3-28.3 40.5-48 73.3-48zM192 64a32 32 0 1 0 0 64 32 32 0 1 0 0-64zm73.3 0L480 64c17.7 0 32 14.3 32 32s-14.3 32-32 32l-214.7 0c-12.3 28.3-40.5 48-73.3 48s-61-19.7-73.3-48L32 128C14.3 128 0 113.7 0

<details>
<summary>英文:</summary>

I want the ```&lt;span&gt;``` to appear behind the ```#sideBar``` i tried ```z-index: -3``` but that didn&#39;t work

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    body {
      margin: 0px;
      font-family: &quot;Signika Negative&quot;, sans-serif;
      background-color: #252525;
      color: #f8f9fa;
      user-select: none;
    }

    #sideBar{
      width: 2vw;
      height: 100vh;
      background-color: rgb(15, 15, 15);
      opacity: .99;
    }

    .menuBtn{
      background: none;
      cursor: pointer;
      padding: .5vw;
      border: none;
      padding: none;
      color: white;
      font-weight: 600;
      font-size: 1vmax;
    }

    .menuBtn .label{
      transition: left .5s;
    }

    .label{
      position: absolute;
      font-size: .9vmax;
      opacity: 1;
      left: -2.2vw;
    }

    svg{
      transition: transform .5s;
    }

    .menuBtn:hover svg{
      transform: scale(1.2);
    }



    .menuBtn:hover .label{
      opacity: 1;
      left: 2.2vw;
    }

&lt;!-- language: lang-html --&gt;

    &lt;!DOCTYPE html&gt;
    &lt;html lang=&quot;en&quot;&gt;
    &lt;head&gt;
        &lt;link rel=&quot;preconnect&quot; href=&quot;https://fonts.googleapis.com&quot; /&gt;
        &lt;link rel=&quot;preconnect&quot; href=&quot;https://fonts.gstatic.com&quot; crossorigin /&gt;
        &lt;link href=&quot;https://fonts.googleapis.com/css2?family=Fira+Mono&amp;family=Signika+Negative:wght@300&amp;display=swap&quot; rel=&quot;stylesheet&quot;/&gt;

        &lt;style&gt;
            @import url(&quot;https://fonts.googleapis.com/css2?family=Fira+Mono&amp;family=Signika+Negative:wght@300&amp;display=swap&quot;);
        &lt;/style&gt;
        &lt;meta charset=&quot;UTF-8&quot; /&gt;
        &lt;link rel=&quot;stylesheet&quot; href=&quot;styles.css&quot; /&gt;
        &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot; /&gt;
        &lt;title&gt;OverStat&lt;/title&gt;
    &lt;/head&gt;

    &lt;body&gt;
    &lt;div id=&quot;sideBar&quot;&gt;
            &lt;div class=&quot;menuBtn&quot; onclick=&quot;clear()&quot;&gt;&lt;span class=&quot;label&quot; &gt;Clear all games and ranks&lt;/span&gt;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 448 512&quot;&gt;&lt;path fill=&quot;lightgrey&quot; d=&quot;M135.2 17.7C140.6 6.8 151.7 0 163.8 0H284.2c12.1 0 23.2 6.8 28.6 17.7L320 32h96c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 96 0 81.7 0 64S14.3 32 32 32h96l7.2-14.3zM32 128H416V448c0 35.3-28.7 64-64 64H96c-35.3 0-64-28.7-64-64V128zm96 64c-8.8 0-16 7.2-16 16V432c0 8.8 7.2 16 16 16s16-7.2 16-16V208c0-8.8-7.2-16-16-16zm96 0c-8.8 0-16 7.2-16 16V432c0 8.8 7.2 16 16 16s16-7.2 16-16V208c0-8.8-7.2-16-16-16zm96 0c-8.8 0-16 7.2-16 16V432c0 8.8 7.2 16 16 16s16-7.2 16-16V208c0-8.8-7.2-16-16-16z&quot;/&gt;&lt;/svg&gt;&lt;/div&gt;

            &lt;div class=&quot;menuBtn&quot;&gt;&lt;span class=&quot;label&quot;&gt;Prefrences&lt;/span&gt;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 512 512&quot;&gt;&lt;!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --&gt;&lt;path fill=&quot;lightgrey&quot; d=&quot;M0 416c0-17.7 14.3-32 32-32l54.7 0c12.3-28.3 40.5-48 73.3-48s61 19.7 73.3 48L480 384c17.7 0 32 14.3 32 32s-14.3 32-32 32l-246.7 0c-12.3 28.3-40.5 48-73.3 48s-61-19.7-73.3-48L32 448c-17.7 0-32-14.3-32-32zm192 0a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zM384 256a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zm-32-80c32.8 0 61 19.7 73.3 48l54.7 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-54.7 0c-12.3 28.3-40.5 48-73.3 48s-61-19.7-73.3-48L32 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l246.7 0c12.3-28.3 40.5-48 73.3-48zM192 64a32 32 0 1 0 0 64 32 32 0 1 0 0-64zm73.3 0L480 64c17.7 0 32 14.3 32 32s-14.3 32-32 32l-214.7 0c-12.3 28.3-40.5 48-73.3 48s-61-19.7-73.3-48L32 128C14.3 128 0 113.7 0 96S14.3 64 32 64l86.7 0C131 35.7 159.2 16 192 16s61 19.7 73.3 48z&quot;/&gt;&lt;/svg&gt;&lt;/div&gt;

            &lt;div class=&quot;menuBtn&quot;&gt;&lt;span class=&quot;label&quot;&gt;How to use&lt;/span&gt;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 512 512&quot;&gt;&lt;!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --&gt;&lt;path fill=&quot;lightgrey&quot; d=&quot;M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z&quot;/&gt;&lt;/svg&gt;&lt;/div&gt;
        &lt;/div&gt;
    &lt;/body&gt;
    &lt;/html&gt;

&lt;!-- end snippet --&gt;



</details>


# 答案1
**得分**: 2

在`#sidebar`上使用`opacity: .99`时，它会在`#sidebar`上形成一个层叠上下文，即使你设置`z-index: -1000`，里面的所有内容仍然会固定在上面。

```css
#sidebar {
   opacity: 1;
}
.label {
   z-index: -3;
}

了解更多关于层叠上下文的信息。

英文:

When you put opacity: .99 on the #sidebar, it forms a stacking context on #sidebar and everything inside it is stuck on it even if you put a z-index: -1000.

#sidebar {
opacity: 1;
}
.label {
z-index: -3;
}

Read more about the stacking context.

huangapple
  • 本文由 发表于 2023年2月23日 20:51:07
  • 转载请务必保留本文链接：https://go.coder-hub.com/75545080.html
  • css
  • html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定