Question

所以这一直困扰着我一段时间。让我们假设您构建一个站点并具有z-index值的各种元素。根据您使用的浏览器打开开发人员工具或firebug时，它似乎会移动元素而不是整个页面。

这是材料设计比平面设计的后备还是我只是遗漏了一些东西。感觉有些不对劲。我在很多网站上看到同样的问题，并亲自遇到过。只是想知道是否有一些css或js骗过我的东西到位。

值得补充的是，这只是一个垂直问题，所以我不相信媒体查询可以解决这个问题，因为高度不是一个因素。我也尝试将页面主体修复为最小高度值，但事实并非如此。它只是正在移动的z索引值项。

也许我需要修复受影响的单个元素的最小高度？但如果我每次都需要这样做，这似乎有点长了

有关此的任何信息将非常感谢

Answer 1

大家好，首先感谢您的投入。虽然我很欣赏您的所有回复，但他们并没有按照我想要的方式工作。昨晚我发现了一些挖掘，并想到自己必须有一个更好的方法来做到这一点。

Perphaps我没有解释得足够多，我实际上要做的是在元素的背景图像上放置一个渐变，然后在同一个元素上使用：before选择器并使用z-index值。这导致一个巨大的ballache在视口上变化，渐变将不是足够的高度或过度拉伸。

回到我最初的想法，我开始思考自己，认为必须有一种方法来减少麻烦。经过一番挖掘BOOM！我意识到你实际上可以在同一个元素中组合背景图像和渐变属性，解决了问题。

以下是我设置的课程：

.site-header {
  min-height: 90vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background: linear-gradient(to bottom right,#1d9bc8,#37e1d7, transparent), url("../img/herobg.jpg") no-repeat center; 
  background-size: cover;
}

打开开发人员工具时如何停止元素移动

1 个答案: