Question

我想创建一个页面，其中有3条宽线/条在页面垂直向下运行。这些将在页面上均匀分布，以创建在页面上运行的监狱栏的效果。这将涵盖部分内容，但稍后将使用jquery删除。

我使用div设置了宽度和高度id的{{1}}创建了3个条形图，并使用了每个条形图的绝对定位。我的理解是，由于这些元素绝对定位，它们将不受文档流影响而不会影响周围元素。当我向页面垂直添加1条时，这很有效，但是当我尝试添加另一个条形时，css会中断吗？

有关为什么这不能超过1 bar并且我如何解决它的任何想法？

提前致谢

代码如下：

HTML：

<div id="header">

<div class="middle-section">


      <ul id="main-links">
        <li><a href="#section-one">Section One</a></li>
        <li><a href="#section-two">Section Two</a></li>
        <li><a href="#section-three">Section Three</a></li>
        <li><a href="#section-four">Section Four</a></li>
            <li><a href="#section-five">Section five</a></li>
      </ul>

      <div id="bar1">

      <div id="bar2">

      <div id="bar3">

   </div>

</div> <!--end of header -->




<div id="page-content">

CSS：

.middle-section
{
 width:1000px;
 position:relative;
 margin:0 auto;
}

#header
{
 background:#fff;
 color:#666;
}

#header .middle-section
{
 position: relative;
 min-height:100px;
 background:#f7f7f7;
 border-bottom: 1px solid #666;
}

div#bar1 {
position:absolute;
top:0;
left:200px;
width:133px;
height: 1000px;
background-color: #f00;
z-index: 99;
}

div#bar2 {
position:absolute;
 top:0;
 left:400px;
 width:133px;
 height: 1000px;
 background-color: #f00;
 z-index: 99;
}

div#bar3 {
 position:absolute;
 top:0;
 left:600px;
 width:133px;
 height: 2000px;
 background-color: #f00;
 z-index: 99;
 }

Answer 1

您需要关闭每个条形div的div，并在此处更新jsbin

添加多个绝对定位元素会破坏css

1 个答案: