什么可能导致翻译后的 div 元素不与周围的内容重叠？

Question

我想要达到的效果相当简单。当用户将鼠标悬停在位于页面底部的 div 中的元素上时，“卡片”会向上滑动，从而显示更多内容。

每当我在 jsfiddle 上创建“测试”页面时，它都会按我的预期工作。 Here's a link to an example 只需将鼠标悬停在底部按钮或黄色 div 框上，它们就可以向上翻译并“覆盖”页面主体（代码 sn-ps 在本文末尾共享）。

但是，每当我尝试在自己的项目中实现这一点时，悬停的元素确实会向上滑动，但它们不会重叠在剩余页面的顶部。 Here's a screenshot illustrating the problem.

我尝试将布局和内容精简到几乎没有（删除 Bootstrap 和 flexbox 相关内容，从主中心区域删除动画，删除画布元素等），但问题仍然存在。

据我所知，所有 z-index 和堆叠上下文都很好......例如，有问题的底部面板确实呈现在流程中的先前元素之上，但“向上滑动”部分仍然会被包含的 div “截断”，而不是在页面的前面部分上方“重叠”。

知道什么会导致这种行为吗？有什么我可能会忽略的吗？

这里有一些来自我的“内脏”测试平台的代码 sn-ps。 “主” div 甚至现在只是一个空白的无类 div，没有容器或 flexbox 等。

application.html.erb

<!DOCTYPE html>
<html>
<head>
  <%= render 'layouts/head' %>
  <%= render 'layouts/shim' %>
</head>
<body class="<%= controller.controller_name %>">
  <div id="wrapper">
    <%= render 'layouts/header' %>
    <div>

      <% flash.each do |message_type, message| %>
        <%= content_tag(:div, message, class: "alert alert-#{message_type}") %>
      <% end %>
      <br />

      <%= yield %>

      <%= render 'tasks/bottom_panel' %>
    </div>

    <%= <%= render 'layouts/footer' %1> %>
    <%= debug(params) if Rails.env.development? %>
  </div>
</body>
</html>

tasks/_bottom_panel.html.erb

<div id="bottom-panel">
  <div id="test"></div>
  <div id="test2"></div>
  <%= button_tag "TESTING", class:"btn btn-med btn-primary" %>
</div>

图片索引页面（如示例截图所示）

<h1>Images</h1>

<table>
  <thead>
    <tr>
      <!-- <th colspan="3"></th> -->
    </tr>
  </thead>

  <tbody>
    <% @images.each do |image| %>
      <tr>
        <td><%= image.id %></td>
        <td><%= image_tag image.file_url(:mini)  %></td>
        <td><%= link_to 'Show', image %></td>
        <td><%= link_to 'Edit', edit_image_path(image) %></td>
        <td><%= link_to 'Destroy', image, method: :delete, data: { confirm: 'Are you sure?' } %></td>
      </tr>
    <% end %>
  </tbody>
</table>

SCSS（注意：尝试荒谬的 z-index 值，并混合“浮点数”以查看是否可行）

#bottom-panel {
  height: auto;
  width: 100%;
  // height: 60px;

  background-color: $background-grey;
  // width: calc(100% - #{$right-panel-width});
  // max-width: calc(100% - #{$right-panel-width});

  // position: absolute;
  position: fixed;
  bottom: 0;
  left: 0;

  z-index: 6;

  margin: 0;
  overflow: hidden;

  #test {
    display: inline-block;

    float: left;

    z-index: 20;

    height: 300px;
    width: 300px;
    background: green;

    &:hover {
      transform: translate(0%, -10%);
      transition-duration: 100ms;
    }
  }

  #test2 {
    display: inline-block;

    float: left;

    height: 300px;
    width: 300px;
    background: red;

    &:hover {
      transform: translate(0%, -10%);
      transition-duration: 100ms;
    }
  }

  .btn {
    height: 200px;

    &:hover {
      transform: translate(0%, -10%);
      transition-duration: 100ms;
    }
  }

---

jsfiddle 代码

HTML

<div id="main">
  <div id="bottom-navbar">
    <button class="btn btn-med btn-primary">
      BUTTON!
    </button>
    <div id="test-div"></div>
  </div>
</div>

SCSS

$bottom-navbar-height: 50px;

#main {
  margin: 0;
  padding: 0;
  width: 100%;
  height: calc(100vh - #{$bottom-navbar-height});
  background: green;
}

#bottom-navbar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: $bottom-navbar-height;
  background: blue;

  .btn {
    height: 40px;
    display: inline-block;
    vertical-align: top;

    &:hover {
      transform: translate(0px, -10px);
    }
  }

  #test-div {
    height: 50px;
    width: 80px;
    display: inline-block;
    background: yellow;

    &:hover {
      transform: translate(0px, -10px);
    }
  }
}

Answer 1

你的组合风格：

#bottom-panel {
    height: $bottom-navbar-height;
    overflow: hidden;
}

强制浏览器剪辑内容，这会影响您的按钮和 div 转换。文档说：

必要时剪裁内容以适应填充框。

只需删除overflow property，它就会按预期工作。