3个div中的1个具有css的绝对位置答案

【问题标题】：1 out of 3 div with absolute position with css3个div中的1个具有css的绝对位置
【发布时间】：2016-05-30 12:23:51
【问题描述】：

我的想法是在 3 个 div 下方并排放置一个横幅，我想做的是，当我向下滚动时，只有中心和右侧 div 移动。

#banner  {
  background:blue;
  color:white;
  position: fixed;
  height:300px;
  width:500px;
  border-style: dotted;
}
#left   {
  background:blue;
  color:white;
  position: fixed;
  top:300px;
  height:300px;
  width:150px;
  border-style: dotted;
  float:left;
}
#center   {
  background:red;
  color:white;
  top:300px;
  left:150px;
  height:700px;
  width:150px;
  border-style: dotted;
  float:left;
  z-index:-1;
}
#right   {
  background:red;
  color:white;
  top:300px;
  left:300px;
  height:300px;
  width:150px;
  border-style: dotted;
  float:left;
  z-index:-1;
}

<div id="banner">
  banner
</div>
<div id="left">
  left
</div>
<div id="center">
  center
</div>
<div id="right">
  right
</div>

据我了解，我应该在左侧和横幅 div 上使用 position: absolute 或 fixed。如果我这样做，我必须提供所有 DIV left: 和 top: 属性，并使它们组合在一起。我还应该给他们高度：和宽度和z-index到#center和#right。我担心这将无法在不同的浏览器、分辨率等中正确显示。有没有更简单的方法呢？这是我失败的尝试：https://jsfiddle.net/y71fqthf/1/ 如您所见，可以看到这些框位于其顶部的横幅下方。这是我不想要的。

或者这通常是显示网站的一种不好的方式？

【问题讨论】：

我会在内容 DIV 中添加一个容器，并在左侧和顶部添加一个 relative 空白 DIV，以避免使用 LEFT 和 TOP 属性..
但是我给你的建议是使用一些网格，比如Bootstrap 这会让你更容易让网站响应
@miguelmpn 我正在使用引导程序，它的工作几乎完美。由于某种原因，在我的 iPhone 中它并没有填满整个屏幕。如果您想作为答案发布，请使用引导程序，您将获得学分。

标签： html css

【解决方案1】：

改变一些css属性

 #banner  {
      background:blue;
      color:white;
      position: fixed;
      height:300px;
      width:500px;
      border-style: dotted;
    }
    #left   {
      background:blue;
      color:white;
      position: fixed;
      top:300px;
      height:300px;
      width:150px;
      border-style: dotted;
      float:left;
    }
    #center {
    background: red none repeat scroll 0 0;
    border-style: dotted;
    color: white;
    float: left;
    height: 700px;
    margin-left: 156px;
    position: relative;
    top: 300px;
    width: 150px;
    z-index: 8;
    }
    #right {
    background: red none repeat scroll 0 0;
    border-style: dotted;
    color: white;
    float: left;
    height: 300px;
    margin-left: 0;
    position: relative;
    top: 300px;
    width: 150px;
    z-index: 5;
}

https://jsfiddle.net/y71fqthf/1/

【讨论】：

【解决方案2】：

根据要求，这是一个引导示例，我没有完全测试它，因为我在工作，我必须尽快完成，如果您发现任何问题，请告诉我们，我会尝试解决他们..

.header {
  width: 100%;
  z-index: 10;
}
.header-inner {
    background-color: #fababa;
    position: relative;
}

.content .sidebar-right {
    margin-top: 150px;
    background-color: #a9a8a8;
    min-height: 5500px;
}
.container {
    background-color: #f2f2f2;
}
.sidebar-outer {
    margin-top: 150px;
    position: relative;
}
.fixed {
    position: fixed;
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="header fixed">
  <div class="container">
    <div class="row">
      <div class="col-md-12 col-sm-12 col-xs-12 header-inner" >
        <div class=" col-md-12 col-sm-12 col-xs-12" style="height: 150px;">
          Here goes the Fixed header
        </div>
      </div>
    </div>
  </div>
</div>

<div class="container content">
    <div class="row">
        <div class="col-md-3 col-sm-3 col-xs-3 sidebar-outer" >
            <div class="fixed col-md-3 col-sm-3 col-xs-3">
                <img class="img-responsive"
                     src="http://placekitten.com/300/200"/>
                Here goes the Fixed column
            </div>
        </div>
        <div class="col-md-9 col-sm-9 col-xs-9 sidebar-right">Content goes here (you can use sub-columns)...</div> 
    </div>
</div>

【讨论】：