【问题标题】:how to display div in front of <header> element如何在 <header> 元素前显示 div
【发布时间】:2023-03-19 20:25:01
【问题描述】:

如何在标题前面显示位于 &lt;header&gt; 元素之外的 div,即具有更高的 z-index。我尝试使用 z-index 属性,但它似乎不起作用。我的特定示例可以在这里看到:http://www.spabc.com/drupal/ 我想在标题栏前面的右侧显示徽标。

【问题讨论】:

  • 把它放在header元素里面怎么样?

标签: css z-index drupal-theming


【解决方案1】:

position: relative; 添加到#logo

#logo {position: relative;}

【讨论】:

    【解决方案2】:

    添加

    position: relative;
    

    #logo 可以。至于z-index,它不适用于默认定位元素。标准的position 属性是static

    z-index 仅适用于定位元素(位置:绝对, 位置:相对,或位置:固定)。

    详细了解 z-index here

    默认元素堆叠

    我在MDN 上读到了这篇文章,我想我会先看一遍,然后再发到这里。

    当元素的属性中没有 z-index 时,元素按以下顺序堆叠,3 是最靠后的一个:

    1. 根元素的背景和边框
    2. 正常流程中的后代块,按出现顺序(在 HTML 中)
    3. 后代定位元素,按出现顺序(在 HTML 中)

    这个命令仍然有规则。

    • 如果多个重叠对象的position 值相同,则按照它们在 HTML 文档中的位置给出顺序。
    • 如果未设置position 值,则默认为static 值。 static 元素将始终落后于具有 position 值。

    div {
      font: 12px Arial;
    }
    span.bold {
      font-weight: bold;
    }
    #normdiv {
      height: 70px;
      border: 1px dashed #999966;
      background-color: #ffffcc;
      margin: 0px 50px 0px 50px;
      text-align: center;
    }
    #reldiv1 {
      opacity: 0.7;
      height: 100px;
      position: relative;
      top: 30px;
      border: 1px dashed #669966;
      background-color: #ccffcc;
      margin: 0px 50px 0px 50px;
      text-align: center;
    }
    #reldiv2 {
      opacity: 0.7;
      height: 100px;
      position: relative;
      top: 15px;
      left: 20px;
      border: 1px dashed #669966;
      background-color: #ccffcc;
      margin: 0px 50px 0px 50px;
      text-align: center;
    }
    #absdiv1 {
      opacity: 0.7;
      position: absolute;
      width: 150px;
      height: 350px;
      top: 10px;
      left: 10px;
      border: 1px dashed #990000;
      background-color: #ffdddd;
      text-align: center;
    }
    #absdiv2 {
      opacity: 0.7;
      position: absolute;
      width: 150px;
      height: 350px;
      top: 10px;
      right: 10px;
      border: 1px dashed #990000;
      background-color: #ffdddd;
      text-align: center;
    }
    <div id="absdiv1">
      <br /><span class="bold">DIV #1</span>
      <br />position: absolute;
    </div>
    
    <div id="reldiv1">
      <br /><span class="bold">DIV #2</span>
      <br />position: relative;
    </div>
    
    <div id="reldiv2">
      <br /><span class="bold">DIV #3</span>
      <br />position: relative;
    </div>
    
    <div id="absdiv2">
      <br /><span class="bold">DIV #4</span>
      <br />position: absolute;
    </div>
    
    <div id="normdiv">
      <br /><span class="bold">DIV #5</span>
      <br />no positioning
    </div>

    在浮动对象上没有 z-index 的堆叠

    对于浮动块,堆叠顺序有点不同。浮动块放置在非定位块和定位块之间:

    1. 根元素的背景和边框
    2. 正常流程中的后代块,按出现顺序(在 HTML)
    3. 浮动块
    4. 正常流中的内联后代
    5. 后代定位元素,按出现顺序(在 HTML 中)

    div {
      font: 12px Arial;
    }
    span.bold {
      font-weight: bold;
    }
    #absdiv1 {
      opacity: 0.7;
      position: absolute;
      width: 150px;
      height: 200px;
      top: 10px;
      right: 140px;
      border: 1px dashed #990000;
      background-color: #ffdddd;
      text-align: center;
    }
    #normdiv {
      /* opacity: 0.7; */
      height: 100px;
      border: 1px dashed #999966;
      background-color: #ffffcc;
      margin: 0px 10px 0px 10px;
      text-align: left;
    }
    #flodiv1 {
      opacity: 0.7;
      margin: 0px 10px 0px 20px;
      float: left;
      width: 150px;
      height: 200px;
      border: 1px dashed #009900;
      background-color: #ccffcc;
      text-align: center;
    }
    #flodiv2 {
      opacity: 0.7;
      margin: 0px 20px 0px 10px;
      float: right;
      width: 150px;
      height: 200px;
      border: 1px dashed #009900;
      background-color: #ccffcc;
      text-align: center;
    }
    #absdiv2 {
      opacity: 0.7;
      position: absolute;
      width: 150px;
      height: 100px;
      top: 130px;
      left: 100px;
      border: 1px dashed #990000;
      background-color: #ffdddd;
      text-align: center;
    }
    <div id="absdiv1">
      <br /><span class="bold">DIV #1</span>
      <br />position: absolute;
    </div>
    
    <div id="flodiv1">
      <br /><span class="bold">DIV #2</span>
      <br />float: left;
    </div>
    
    <div id="flodiv2">
      <br /><span class="bold">DIV #3</span>
      <br />float: right;
    </div>
    
    <br />
    
    <div id="normdiv">
      <br /><span class="bold">DIV #4</span>
      <br />no positioning
    </div>
    
    <div id="absdiv2">
      <br /><span class="bold">DIV #5</span>
      <br />position: absolute;
    </div>

    【讨论】:

    • 关于z-index 的重要理论部分 :-) 当CSS 代码中没有z-index 时,您能否阐明它是如何工作的?
    • 我在阅读了您的评论后就阅读了 MDN。我在我的答案中添加了它,即使它没有被 OP 选为答案。只是为了方便,我猜。无论如何感谢@panther!实际上,我确实通过阅读自己学到了一些东西。
    猜你喜欢
    • 2019-03-11
    • 1970-01-01
    • 2010-10-19
    • 1970-01-01
    • 2019-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-07-02
    相关资源
    最近更新 更多