标签: z-index

我将三个元素相互堆叠在一起。现在我希望将最里面的元素放置在其父元素后面，但仍位于其祖元素前面。我尝试了 z-index 设置的不同变体，但没有成功。

根据我对 z-index 的理解，应该使用的代码是：

<div style="width: 400px; height: 400px; background-color: purple; position: relative; z-index: 1;">
    <div style="width: 200px; height: 200px; background-color: blue; position: relative; z-index: 1;">
        <div style="width: 100px; height: 100px; background-color: green; position: relative; z-index: -1;"></div>
    </div>
</div>

但事实并非如此。

有什么解决办法吗？

我已经实现了以下网站：链接

网站的标题部分有两个文本字段。如果单击文本字段，则会弹出日历。我的问题是，尽管我设置了 css 属性position: absolute;和z-index: 999;. 问题是什么？我该如何解决？

我仅使用 CSS 悬停缩略图：

<style type='text/css'>
#like_table td a{z-index:2;}
#like_table .tooltip
{
    position: relative;
    z-index:1;
}
#like_table .tooltip a
{
  z-index:2;
}
#like_table .tooltip span
{
  z-index:9999;
  display:none;
}
#like_table .tooltip:hover span
{
          position:absolute;
          display:block;
          top:1.5em;
          left:2em;
          border:1px solid black;
          background-color:white;
          padding:0.2em;
}
#like_table td .tooltip .tooltip_thumb{
            z-index:99999;
}
</style>

<table id='like_table' class='smallfont' border='0' cellpadding='0' cellspacing='0'><tr><td>
                    <div class='like_row'>
                        <a href='#user1' class='nul'>User 1</a> liked <a href='#link' class='tooltip'>forum post<span><img src='image.jpg' class='tooltip_thumb' alt='' /></span></a>
                        <span class='by_user'>by <a href='#user2' class='nul'>User 2</a></span>
                    </div>
                    </td>
</tr>

不幸的是，跨度和悬停图像上的 …

我的对话框用户界面有一个小问题。我将 zIndex 值标记为高数字，但它似乎忽略了它。

以下是我的代码

        $( "#number-add" ).dialog({
            resizable: false,
            width: 500,
            modal: false,
            autoOpen: false,
            stack: false,
            zIndex: 9999,
            buttons: {
            "Add Contact": function(e) {

            var formData = $('#number-add-form').serialize();

            //submit record
            $.ajax({    
                type: 'POST',
                url: 'ajax/handler-add-new-account-number.php',     
                data: formData,
                dataType: 'json',
                cache: false,
                timeout: 7000,
                success: function(data) {           

                    $('#responceAddNumber').removeClass().addClass((data.error === true) ? 'errorBox' : 'passBox').html(data.msg).fadeIn('fast');   

                    if ($('#responceAddNumber').hasClass('passBox')) {
                        $('#responceAddNumber').fadeIn('fast');
                        $('#add-form').hide();              

                        window.location.reload();
                        setTimeout(function() {

                            $(this).dialog( "close" );                          
                        }, 1000);


                    }

                },
                error: function(XMLHttpRequest, textStatus, errorThrown) {

                    $('#response-add').removeClass().addClass('errorBox')
                                .html('<p>There was an<strong> ' + …

我正在使用 Sticky.js ( http://stickyjs.com ) 在页面导航到达屏幕顶部后将其固定。到目前为止效果很好，除了一旦触发粘性似乎就会出现 z 索引或透明度问题。内容在固定导航下方过于明显地通过，在此期间导航链接无法可靠地选择。

\n

这是一个演示的快速屏幕流程： https: //web.archive.org/save/cl.ly/StqJ

我的网站：https://livingibogaine.squarespace.com/detox/

HTML：

/* jquery */ <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>\n/* sticky script */ <script type="text/javascript" src="https://cdn.jsdelivr.net/jquery.sticky/1.0.0/jquery.sticky.min.js"></script>\n\n<script type="text/javascript">\n  $(window).load(function(){\n    $("#page-nav").sticky({ topSpacing: 0 });\n  });\n</script>\n\n<ul id="page-nav">\n  <a href="#chapter-1"><li>Iboga Ceremony</li></a>\n  <a href="#chapter-2"><li>Clinical Detox</li></a>\n  <a href="#chapter-3"><li>Medical Standards</li></a>\n  <a href="#canvas-wrapper"><li>Top \xe2\x86\x91</li></a>\n</ul>\n

CSS：

#page-nav {\n  /* structural stuff */\n  position: absolute; top: -40px; left: 0; right: 0; \n  padding: 0 1500px; margin: 0 -1500px;\n\n  /* non-essentials */ …

我有一个固定的菜单栏，其中包含一个简单的<ul> <li>菜单系统。在li:hover我旁边有一个子菜单系统出现，这是相对于每个li的。不幸的是，这一点总是出现在所有父母的头顶上。

当我实际上希望它位于div#sidebar. 这可能吗？我没有太多运气z-index（包括-1），任何帮助将不胜感激！

<div id="sidebar">
    <nav class="secondary">
            <h2>Featured</h2>
            <ul>
                    <li>
                <a href="#">
                    <h3>Title</h3>
                </a>
                        <aside class="article-card">
                            <h4>TITLE</h4>
                            <h5>TEXT</h5>
                        </aside>
                    </li>
            </ul>
    </nav>
</div>


ul {
    list-style: none;
    display: inline-block;
    width: 59.6%;
    margin-right: 9.1%;
    float: right;
    margin-bottom: 40px;
}

li {
    display: block;
    margin-bottom: 10px;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

#sidebar {
    background: #253e40;
    color: #8b8c91; …

我想在 z 平面上订购 3 个 HTML 元素：

.bank {
  width: 200px;
  height: 200px;
  background-color: grey;
  position: absolute;
  
  z-index: 100;
  
  transform: translateY(10%);
}

.card {
  width: 100px;
  height: 100px;
  background-color: red;
  
  position: absolute;
  left: 50px;
  top: 50px;
  
  z-index: 300;
}

.button {
  width: 50px;
  height: 50px;
  background-color: green;
  
  position: absolute;
  left: 30px;
  top: 50px;
  
  z-index: 200;
}

<div class="bank">
       bank
       <div class="card">card</div>
    </div>
    
    <div class="button">button</div>

我希望按钮位于银行顶部但卡后面。但无论我如何尝试，按钮始终位于银行和卡的顶部。

编辑：我注意到从“.bank”中删除 z-index 和转换可以解决这个问题，但我需要转换属性。我能做些什么？

什么可能导致它无法工作？谢谢

这是演示该问题的示例代码

.under {
   position: absolute;
   top: 10px;
   left: 10px;
   border: 2px solid blue;
   width: 150px;
   height: 150px;
}

.under:hover {
   border: 10px solid green;

}

.over {
   position: absolute;
   z-index: 10;
   top: 10px;
   left: 10px;
   width: 150px;
   height: 150px;
   border: 1px solid black;
}

<div>
  <div class="under">
      Hello!
  </div>

  <div class="over" data-comment="I am invisible">
  </div>
</div>

当鼠标悬停在overdiv 上时，我希望underdiv 能够感知悬停事件，并在这种情况下相应地更改边框。

然而overdiv 显然拦截了悬停事件。是否有一个纯CSS解决方案将悬停事件传递给underdiv？

我有两个container元素，它们有position: sticky和 a z-index: 1。

其中一个元素有一个带有 的子节点position: absolute。

我希望子节点在视觉上位于两个container元素的顶部。

这是我必须保留的 html 结构以及我尝试过的内容：

.square {
  height: 100px;
  width: 100px;
  position: absolute;
  background-color: red;
  z-index: 10; /* this doesn't work */
}

.container {
  height: 40px;
  width: 200px;
  position: sticky;
  background-color: blue;
  margin-top: 1rem;
  margin-bottom: 1rem;
  z-index: 1;
}

<!DOCTYPE html>
<html>
  <body>
    <div class="container">
      <div class="square"></div>
    </div>
    <div class="container"></div>
  </body>
</html>

这是它目前的样子：

这是我希望它的外观：

但我想保持元素的html结构和sticky对齐方式container。

根据我的理解，::before应该出现在元素下方，并且::after应该出现在元素上方（就 z-index 而言）。

在下面的示例中，当鼠标悬停在按钮上时，我尝试使背景颜色变暗（而不是前景色）。即使我用过::before它仍然出现在前面。为什么？我知道我可以用 来修复它z-index，但是根据这个有 6 个赞成票的评论：

我认为最好使用 :before ，这样你就可以得到正确的堆叠顺序，而无需使用 z-index 。

我不应该这样做，而且顺序应该是正确的？

.parent {
  --my-color: red;  
}
button {
    color: blue;
    background-color: var(--my-color);
    padding: 8px 16px;
    position: relative;
}
button:hover {    
    background-color: transparent;
}
button:hover::before {
    display: block;
    content: "";
    position: absolute;
    top: 0; left: 0; width: 50%; height: 100%; /* width is 50% for debugging (can see whats below) */
    background-color: var(--my-color);
    filter: brightness(80%);
}

<div class="parent">
    <button …