HTML用定位实现重叠,HTML/CSS固定定位造成重叠的div

您所在的问题是因为position: fixed;，因为该对象已从工作流程中移出，而其他对象无法将其推出。我能够得到一个很好的，完全响应的布局工作。 (让我知道它是如何)

固定定位元素从正常流程中删除。 文档和其他元素表现得像固定定位元素 不存在。

固定定位元素可以重叠其他元素。

好什么，我这里做的是使用CSS media queries改变布局。

下面是HTML，

现在媒体查询，

@media only screen and (max-width: 680px) {

.content {

width: 90%;

margin-bottom: 10px;

}

.lSide, .rSide {

position: relative;

width: 90%;

height: 100px;

margin: 10px auto;

bottom: 0;

}

}

不要忘记添加到您的head您html文件，

旧回答

html, body {

width: 100%;

height: 100%;

padding: 0;

margin: 0;

background: tan;

}

.wrap.active {

min-width: 750px;

}

nav {

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 20%;

background: brown;

z-index: 101;

}

.lSide {

background: #3b3b3b;

position: fixed;

left: 0;

top: 20%;

width: 200px;

height: 80%;

}

.content {

width: 300px;

height: 600px;

background: #c1c1c1;

margin: 0 auto;

position: relative;

z-index: 100;

top: 20%;

}

.rSide {

background: #3b3b3b;

position: fixed;

right: 0;

top: 20%;

width: 200px;

height: 80%;

}

.rSide.active {

display: none;

}

的JS，(更新)

$(window).resize(function() {

if ($(window).width() < '750') {

$('.wrap, .rSide').addClass('active');

}

else {

$('.wrap, .rSide').removeClass('active');

}

});

一个解决方案，我已经请参阅旁边捣鼓CSS，是去除右侧时，屏幕尺寸很小。