HTML/CSS 修复了导致 div 重叠的定位答案

【问题标题】：HTML/CSS Fixed positioning causing overlapping divsHTML/CSS 修复了导致 div 重叠的定位
【发布时间】：2013-12-27 00:18:33
【问题描述】：

我正在尝试创建 2 个具有固定位置的侧横幅（左侧和右侧），以及一个居中的内容容器。

问题在于，当最小化屏幕时，2 个侧面横幅覆盖了居中的容器。我需要一个 CSS 解决方案来将视图的最小宽度设置为 860px；之后，窗口变为可滚动且 div 不重叠。完美的解决方案是：

我使用的 HTML 是这样的：

<div class="left" style="position:fixed; height:100%; background-color:#7fb4dd; top:43px; left:0px; width:180px;">
</div>

<div class="center" style="margin:100px 180px 0 180px;">
        <div style="width:100%;">
                        <div style="width:500px; margin:0 auto;">
                        </div>
            </div>
</div>

<div class="right" style="position:fixed; height:100%; background-color:#7fb4dd; top:43px; right:0px; width:180px;">
</div>

上面的代码防止左栏与中心容器重叠；但问题仍然存在于右侧栏。

这是一段代码：preview

【问题讨论】：

请创建一个小提琴。
我在所问问题的底部添加了一个小提琴。
在看了你制作的小提琴之后，我强烈建议你在自己的文件中制作你的 css。内联样式不是要走的路，尤其是响应式网站。

标签： html css web position css-position

【解决方案1】：

您需要将三个 DIV 包装在一个包装 DIV 中并设置 min-width 以防止重叠。这可以防止它变得比三列更窄。将宽度相加，设置为最小值。

【讨论】：

@BruteForce 您还可以使用 javascript 的 if 语句根据它们所在的页面添加它。（如果都不需要这种风格）
@Diodeus 我试过这个建议，但没有解决问题。右 div 仍然覆盖中心包装。滚动条出现但不能阻止右栏问题。
@Josh 你能说明我如何使用 javascript
我给你做个小提琴，请等一下。
@JoshPowell 这会很棒。我自己创建了一个小提琴 (jsfiddle.net/eFY7h)

【解决方案2】：

这是一个纯 HTML/CSS 解决方案，如果它不是你所需要的，请告诉我。

<html>
<head>
<style type="text/css">

body{
margin:0;
padding:0;
line-height: 1.5em;
}

b{font-size: 110%;}
em{color: red;}

#topsection{
background: #EAEAEA;
height: 90px; /*Height of top section*/
}

#topsection h1{
margin: 0;
padding-top: 15px;
}

#contentwrapper{
float: left;
width: 100%;
}

#contentcolumn{
margin: 0 200px 0 230px; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/

background-color : red;
width : 400px;
margin-left : auto;
margin-right : auto;
}

#leftcolumn{
float: left;
width: 200px; /*Width of left column*/
margin-left: -100%;
background: #C8FC98;
}

#rightcolumn{
float: left;
width: 200px; /*Width of right column*/
margin-left: -200px; /*Set left marginto -(RightColumnWidth)*/
background: #FDE95E;
}

#footer{
clear: left;
width: 100%;
background: black;
color: #FFF;
text-align: center;
padding: 4px 0;
}

.innertube{

margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;


height : 700px;
}


.innertubetop{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}

</style>


</head>
<body>
<div id="maincontainer" style = "min-width : 800px;"> <!-- this will be sum of width of all three columns-->

<div id="topsection"><div class="innertubetop"><h1>Hello iam navigation bar</h1></div></div>

<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube"><b>Center Column </b></div>
</div>
</div>

<div id="leftcolumn">
<div class="innertube"><b>Left Column: <em>200px</em></b></div>

</div>

<div id="rightcolumn">
<div class="innertube"><b>Right Column: <em>200px</em></b></div>
</div>


</div>
</body>
</html>

【讨论】：

【解决方案3】：

您遇到的问题是因为position: fixed;，因为该对象已从工作流中取出，其他对象无法将其推开。我能够获得一个很好且完全响应的布局来工作。（让我知道它是怎么回事）

从正常流程中删除固定定位元素。这文档和其他元素的行为类似于固定定位元素不存在。

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

更新答案以更好地满足他的需求 (JSFIDDLE, remove the show, in the url, to see code)

好吧，我在这里做的是使用 css media queries 来改变布局。

这里是html，

<div class="wrap">
    <nav></nav>
    <div class="content"></div>
    <section class="lSide"></section>
    <section class="rSide"></section>
</div>

现在是媒体查询，

@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，

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0;">

旧答案

CSS，(JSFIDDLE, remove the show to see code)

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 旁边的 fiddle，是当屏幕尺寸太小时移除右侧。

【讨论】：

你做的很棒。正如您所说，右侧横幅更难控制。如果您能解决问题或提出任何建议，我将不胜感激。
好建议。我在移动设备上对其进行了测试，显示出重叠的问题。
啊，如果这是针对移动设备的，那么我强烈建议您查看media queries。 css-tricks.com/css-media-queries
@BruteForce 查看我的更新答案，为您提供最佳选择。