已修复位置的叠加并不显示div内的所有内容

我在位置固定的div内创建了叠加，因为我想使用从网站最顶端开始的幻灯片效果来显示它。已修复位置的叠加并不显示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 

}

的问题是，不覆盖格内的所有内容所示。我也尝试插入一个溢出：auto，但它不起作用。

这里是例子：
demo

来源

2016-04-26 Daniel

叠加的含量太大，位置固定的方式正是：固定的，因此不能滚动，如果视口太小。 – Paul

您不能使用'position：fixed'，因为一旦应用，覆盖层与“父”div没有任何关系。所有定位等现在都与视口...和视口相关。 –

如果你想保持固定的位置，你可以添加一个滚动条到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

来源

2016-04-26 08:51:45

你必须使用固定的？

Position : absolute

对我来说，如果我正确地理解你想要的东西，那对我有用。

来源

2016-04-26 08:47:20 Koen

嗨，是的，我想使用固定位置。当我点击相关的类时，div应该显示为固定的，因为我需要从网站的每个部分调用它来自顶部的固定导航栏。 – Daniel

因为它已经跳出流程不能在fixed元素添加overflow财产。由于内容被包装在container之内，其中一个解决方案是使其可滚动。

来源

2016-04-26 09:02:15 Lewis

.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; 
    }

来源

2016-04-26 09:12:15 Frutis

已修复位置的叠加并不显示div内的所有内容

回答

相关问题