已修復位置的疊加並不顯示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內的所有內容

回答

相關問題