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

Question

我想要达到的效果很简单。当用户将鼠标悬停在位于页面底部的 div 中的元素上时，"card" 向上滑动，将更多内容带入视图。

每当我在 jsfiddle 上创建 "test" 页面时，它都按我预期的那样工作。 Here's a link to an example 只需将鼠标悬停在底部按钮或黄色 div 框上即可向上翻译和 "cover" 页面主体（在此 post 末尾共享的代码片段).

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

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

据我所知，所有 z-index 和堆叠上下文都很好...例如，有问题的底部面板确实呈现在流程中先前元素的顶部，但是 "slide-up" 部分仍然通过包含 div 而不是页面前面部分上方的 "overlap" 获得 "cut-off"。

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

以下是我的 "gutted" 测试平台的一些代码片段。 "main" 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 值，并混合 "float" 只是为了看看是否有效）

#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 转换。文档说：

Content is clipped if necessary to fit the padding box.

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

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

What could be causing translated div elements to NOT overlap surrounding content?

html

css

sass

z-index

translate-animation