position：absolute;在我的英雄形象doesn't讓我添加更多的內容

鏈接到該網站是position：absolute;在我的英雄形象doesn't讓我添加更多的內容

我有一個圖像的大小封面，只要你進入該頁面。爲了使其在每一個瀏覽器可用的（我在Opera Mini以及Android瀏覽器的麻煩），我將此代碼添加到div元素：

.portada{ 
    width: 100%; 
    height: 100%; 
    position: fixed; 
    padding: 20px 10px 60px 10px; 
    height: 100vh; 
    top: 0; 
    left: 0; 
    z-index: 0; 
     background: url(../img/nike.jpg) no-repeat center center; 
    /* background-attachment: fixed; removed for Android */ 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    overflow: hidden; 
}

不過，現在，由於位置：固定;當我不斷向頁面添加內容時，在該部分的下方顯示，它顯示在圖片下方，我看不到它。它正在摧毀我的頁面。我一拿出這個位置，就立即：固定;代碼，它返回到在Opera和舊的Android瀏覽器中不顯示全屏圖像。

我希望能夠創建更多內容並向下滾動頁面。

我嘗試過的位置：相對;但它回到不工作Opera Mini。它顯示圖像全寬，但最小高度。有什麼幫助嗎？謝謝！

來源

2016-01-25 Hector de Prada

設置z-index：-1; –

我想我終於找到了解決方案。我添加到.portada類最小高度：300px;現在至少在這些瀏覽器中，圖像更大一點，它完成了這項工作。我還拿出了width和height屬性等等之類的最終代碼：

.portada{ 
position: relative; 
min-height: 300px; 
z-index: -1; 
padding: 20px 10px 60px 10px; 
height: 100vh; 
    background: url(../img/nike.jpg) no-repeat center center; 
/* background-attachment: fixed; removed for Android */ 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
overflow: hidden;

}

看起來它工作在每一個瀏覽器，我可以考好。

來源

2016-01-25 13:35:08

這是因爲您將圖像顯示爲背景並且div.portdata爲空。嘗試使用img html標記插入圖像。

來源

2016-01-25 13:38:01 Dionys

position：absolute;在我的英雄形象doesn't讓我添加更多的內容

回答

相關問題