Question

我目前正在尝试使用bootstrap设计一个长滚动网站，我无法找到一种实际放置多个图像的方法，而实际上它们并不相互重叠。我正在寻找的是类似的东西 https://www.flickr.com/

非常感谢任何帮助。

这是我用来制作全屏图像的CSS，但由于某种原因，我之后添加的所有内容都会堆积在它上面，而不是在它下面。

.bg-img{
        position: absolute;
        top: 50%;
        left: 50%;
        min-width: 100%;
        min-height: 100%;
        z-index: -100;
        -ms-transform: translateX(-50%) translateY(-50%);
        -moz-transform: translateX(-50%) translateY(-50%);
        -webkit-transform: translateX(-50%) translateY(-50%);
        transform: translateX(-50%) translateY(-50%);
    }

编辑：使代码可见

Answer 1

将图像定位为absolute时，它不会占用流量中的任何空间。这样它隐藏了它之后的任何东西。

一种解决方案是添加包装器并使用视口单元。 Here's a JSFiddle

.wrapper {
  height: 100vh;
  width: 100vw;
}

.bg-img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 100vh;
  z-index: -100;
  -ms-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

Answer 2

这里绝对是你的问题，这会使一切都不流动，所以没有任何元素相互了解。尝试浮动或显示：内联块等。

内容与页面重叠

2 个答案: