Question

我在div中创建了一个叠加位置，因为我希望使用从网站顶部开始的幻灯片效果来显示它。

这是css代码：

.overlay {
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background-color: rgba(0, 0, 0, 0.75);
 z-index: 9999;
 color: white;
 display: inline-block;
 height: 1040px;//as example

}

问题是并非所有叠加div内的内容都会显示出来。我也尝试插入溢出：auto，但它不起作用。

以下是例子：
FeedEntryMessageSource.java

Answer 1

你必须使用固定的吗？

Position : absolute

如果我理解你想要的东西，对我来说是不是。

Answer 2

如果您想保留固定位置，可以使用overflow : auto;属性和100％高度为其添加滚动条。

.overlay {
  position: fixed;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background-color: rgba(0, 0, 0, 0.75);
     z-index: 9999;
     color: white;
     display: inline-block;
     height: 100%;
     overflow: auto;
}

Fiddle

Answer 3

您无法在overflow元素上添加fixed属性，因为它已经不在流量中。由于内容包含在container中，因此其中一个解决方案是使其可滚动。

.container{
    overflow: auto;
    height: 100%;
}

Answer 4

.colTwo{
  height: 840px;
  background-color: green;
}

.show {
  padding: 8px;
  background-color: #333;
  color:#fff;
  display: inline-block;
  width: 120px;
  position:fixed;
}


.overlay {
  position: fixed;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background-color: rgba(0, 0, 0, 0.75);
     z-index: 9999;
     color: white;
     height: 100%;
     display: inline-block;
     width: 70%;
     margin: auto;
     overflow: auto;
}

.row {
  width: 100%;
  position: absolute;
  }

固定位置的叠加层不会显示div内的所有内容

4 个答案: