2017-05-02 31 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 –