2017-05-02 29 views
4

我工作在一個jsfiddle項目上,無法找到解決方案將我的左側背景圖像div放在響應模式下的右側菜單div下。div在響應模式下的另一個

此時,我的背景圖片div停留在頂部,在我的菜單div下。

這裏是我的鏈接:Jsfiddle

SCREENSHOT

(1)這個我有什麼(2)我想要什麼

enter image description hereenter image description here

html, 
 
body { 
 
    height: 100%; 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 

 
.total { 
 
    box-sizing: border-box; 
 
    height: 100% 
 
} 
 

 
.dessus { 
 
    width: 30%; 
 
    min-height: 100%; 
 
    float: right; 
 
    background: #EEF; 
 
} 
 

 
.spaceone { 
 
    margin: 0px 50px 0px 50px; 
 
    display: block 
 
} 
 

 
.sub-spaceone { 
 
    margin: 0px 50px 50px 50px; 
 
    display: block; 
 
} 
 

 
.space { 
 
    margin: 0px 50px 0px 50px; 
 
    display: block 
 
} 
 

 
.pos { 
 
    position: fixed; 
 
    bottom: 50px; 
 
    float: left; 
 
} 
 

 
.dessous { 
 
    width: 70%; 
 
    min-height: 100%; 
 
    float: left; 
 
    background: url(http://www.work.booclin.ovh/wp-content/uploads/2017/04/Unknown-7.jpeg) no-repeat top center fixed; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
} 
 

 
@media screen and (max-width:1024px) { 
 
    .total { 
 
    width: 100%; 
 
    text-align: center; 
 
    overflow: hidden; 
 
    } 
 
    .dessous { 
 
    width: 100%; 
 
    text-align: center; 
 
    overflow: hidden; 
 
    } 
 
    .dessus { 
 
    width: 100%; 
 
    min-height: 0px; 
 
    } 
 
    .pos { 
 
    position: relative; 
 
    bottom: 0px; 
 
    float: none; 
 
    margin: 30px 50px; 
 
    } 
 
    .spaceone { 
 
    margin: 0px; 
 
    float: left; 
 
    display: block 
 
    } 
 
    .sub-spaceone { 
 
    display: none 
 
    } 
 
    .space { 
 
    margin: 0px 30px 30px 0px; 
 
    display: inline; 
 
    float: right; 
 
    } 
 
} 
 

 
@media screen and (max-width:600px) { 
 
    .pos { 
 
    margin: 50px auto; 
 
    display: block; 
 
    float: none; 
 
    } 
 
    .spaceone { 
 
    margin: 30px auto; 
 
    display: block; 
 
    float: none; 
 
    } 
 
    .space { 
 
    margin: 10px 20px; 
 
    display: inline; 
 
    float: none; 
 
    } 
 
} 
 

 
@media screen and (max-width:300px) { 
 
    .pos { 
 
    margin: 50px auto; 
 
    display: block; 
 
    float: none; 
 
    } 
 
    .spaceone { 
 
    margin: 30px auto; 
 
    display: block; 
 
    float: none; 
 
    } 
 
    .space { 
 
    margin: 10px auto; 
 
    display: block; 
 
    float: none; 
 
    text-align: center; 
 
    } 
 
}
<div class="total"> 
 

 

 
    <div class="dessus"> 
 

 
    <div class="pos"> 
 
     <span class="spaceone">Title</span> 
 
     <span class="sub-spaceone">Sub-Title</span> 
 
     <span class="space">Menu 1</span> 
 
     <span class="space">Menu 2</span> 
 
     <span class="space">Menu 3</span> 
 
    </div> 
 

 
    </div> 
 

 

 
    <div class="dessous"></div> 
 
</div>

+0

雖然有一個小提琴是一件很好的事,幫助我們理解您的問題更好,你還必須包括代碼**在你的問題** - 這就是爲什麼當你發佈它時,你必須把它作爲「代碼」來欺騙系統(你也可以創建一個堆棧片段 - 你可以在編輯器的工具提示中的按鈕中找到它) –

+2

I做了它; D @AlonEitan –

+0

你需要圖像在菜單**下,而不是**下面**它在響應模式? –

回答

2

即將移除固定從.dessous:

.dessous { 
    background: url(http://www.work.booclin.ovh/wpcontent/uploads/2017/04/Unknown-7.jpeg) no-repeat top center; 
} 

html, 
 
body { 
 
    height: 100%; 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 

 
.total { 
 
    box-sizing: border-box; 
 
    height: 100% 
 
} 
 

 
.dessus { 
 
    width: 30%; 
 
    min-height: 100%; 
 
    float: right; 
 
    background: #EEF; 
 
} 
 

 
.spaceone { 
 
    margin: 0px 50px 0px 50px; 
 
    display: block 
 
} 
 

 
.sub-spaceone { 
 
    margin: 0px 50px 50px 50px; 
 
    display: block; 
 
} 
 

 
.space { 
 
    margin: 0px 50px 0px 50px; 
 
    display: block 
 
} 
 

 
.pos { 
 
    position: fixed; 
 
    bottom: 50px; 
 
    float: left; 
 
} 
 

 
.dessous { 
 
    width: 70%; 
 
    min-height: 100%; 
 
    float: left; 
 
    background: url(http://www.work.booclin.ovh/wp-content/uploads/2017/04/Unknown-7.jpeg) no-repeat top center; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
} 
 

 
@media screen and (max-width:1024px) { 
 
    .total { 
 
    width: 100%; 
 
    text-align: center; 
 
    overflow: hidden; 
 
    } 
 
    .dessous { 
 
    width: 100%; 
 
    text-align: center; 
 
    overflow: hidden; 
 
    } 
 
    .dessus { 
 
    width: 100%; 
 
    min-height: 0px; 
 
    } 
 
    .pos { 
 
    position: relative; 
 
    bottom: 0px; 
 
    float: none; 
 
    margin: 30px 50px; 
 
    } 
 
    .spaceone { 
 
    margin: 0px; 
 
    float: left; 
 
    display: block 
 
    } 
 
    .sub-spaceone { 
 
    display: none 
 
    } 
 
    .space { 
 
    margin: 0px 30px 30px 0px; 
 
    display: inline; 
 
    float: right; 
 
    } 
 
} 
 

 
@media screen and (max-width:600px) { 
 
    .pos { 
 
    margin: 50px auto; 
 
    display: block; 
 
    float: none; 
 
    } 
 
    .spaceone { 
 
    margin: 30px auto; 
 
    display: block; 
 
    float: none; 
 
    } 
 
    .space { 
 
    margin: 10px 20px; 
 
    display: inline; 
 
    float: none; 
 
    } 
 
} 
 

 
@media screen and (max-width:300px) { 
 
    .pos { 
 
    margin: 50px auto; 
 
    display: block; 
 
    float: none; 
 
    } 
 
    .spaceone { 
 
    margin: 30px auto; 
 
    display: block; 
 
    float: none; 
 
    } 
 
    .space { 
 
    margin: 10px auto; 
 
    display: block; 
 
    float: none; 
 
    text-align: center; 
 
    } 
 
}
<div class="total"> 
 

 

 
    <div class="dessus"> 
 

 
    <div class="pos"> 
 
     <span class="spaceone">Title</span> 
 
     <span class="sub-spaceone">Sub-Title</span> 
 
     <span class="space">Menu 1</span> 
 
     <span class="space">Menu 2</span> 
 
     <span class="space">Menu 3</span> 
 
    </div> 
 

 
    </div> 
 

 

 
    <div class="dessous"></div> 
 
</div>

+0

你還應該解釋你改變了什麼有效。我看到你刪除了'fixed',所以你必須解釋它阻止背景滾動頁面的其餘部分(即 - 它固定在相對於頁面的相同位置) –

+0

背景附件被設置爲固定的,這意味着它會落後於導航欄,並在滾動時被固定。 – athi

+0

感謝您的描述@athimohan +1; D –