固定位置突破父 div答案

【问题标题】：Fixed positon breaking out of parent div固定位置突破父 div
【发布时间】：2014-05-27 18:37:30
【问题描述】：

您好，我的“粘性”标题有问题。首先，我使用的是 StickyPanel(addon)，但它似乎与客户端想要使用的滑动图库发生冲突，并且在同时使用两者时不会加载。

所以我转向了一个更简单的 jquery 选项，但是当我滚动它时它会中断并移动到内容的左侧。

所以我采用了一种更简单的方法，并为标题使用了固定位置。但是，它似乎突破了右侧的父 div。这是一个例子。在 chrome 中看起来很棒，在 FF 和 IE 中坏了。

我根据网站规则发布代码。

 /* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 769px) {

.gridContainer {
    width: 90.675%;
    padding-left: 0%;
    padding-right: 0%;
    max-width: 1600px;
    margin: auto;
    clear: none;
    float: none;
    z-index:999;
    margin-left: auto;
    background-color: #8E8E8D;

}

#header {
    z-index:998;
    width: 100%;
    height: 90px;
    background-color:#2A2A2A;
    position: fixed;
    float:left;
    border-bottom-width: 8px;
    border-bottom: solid;
    border-bottom-color: #fafafa;


}



#body1 {
    background-color: #8e8e8d;
    float:left;
    width: 100%;
    height: 980px;
}

#body2 {
    float:left;
}

#footer {
    float:left;
}

#body3 {
    float:left;
}

.zeroMargin_desktop {
    margin-left: 0;
}
.hide_desktop {
    display: none;
}

}

和 HTML

</head>
<body>
<div class="gridContainer clearfix">


<div style="display: inline-block;" id="header">

<ul id="nav">

<li><a href="#">About</a>

              <ul style="width: 7em; height: 80px;"  >

                  <li style="margin-left:15px;"><a href="#overview_splash" class="lightbox">Overview</a> </li>
                  <li style="margin-left:15px;"><a href="#management_splash" class="lightbox">Management</a> </li>
              </ul>
      </li>

          <li><a href="#">Services</a>
              <ul style="width: 300px;"  >
                  <li style="margin-left:15px;"><a href="#">Capabilities</a>
                  <ul style="margin: -30px 0 0 120px; height:auto;">
                  <li>Land Planning</li>
                    <li>    Feasibility </li>
                    <li>Survey Coordination </li>
                    <li>Site Development</li>
                        <li>Project Management</li>
                        <li>Public Works</li>
                        <li>Alternative Energy</li>
                        <li>Oil Field Site Prep</li>
                        <li>Septic System Design</li>



                  </ul>
                  </li>

                  <li style="margin-left:15px;">I am a...
                  <ul  style="margin: -30px 0 0 120px; height:auto;" >
                 <li> Developer</li>
                 <li> Contractor</li>
                 <li> Home Builder</li>
                 <li> Municipality </li>
                 <li> Private Land Owner</li>
                <li>  Architect </li>
                <li>  Other </li>
                  </ul>



                  </li>


            </ul>
      </li>



          <li><a href="#">Projects</a></li>
          <li><a href="#contact_splash" class="lightbox">Contact</a></li>
        </li>
    </ul>


</div>

 <div align="center"  id="body1" >
 <div class="flexslider">
 <ul class="slides">
<li>
  <img src="images/slide1.png" alt=""/> </li>
<li>
<img src="images/slide2.png" alt=""/>
</li>
<li><img src="images/slide3.png" alt=""/></li>
<li><img src="images/slide4.png" alt=""/></li>

<li><img src="images/slide5.png" alt=""/></li>

</ul>
  </div>
  </div>



<div align="center" id="body2"> 

<h1> This site is currently under construction, please check back soon </h1>

</div>
<div align="center" id="body3">
<div id="map-canvas" style="width: 100%; height: 420px"></div>
<div style="float:left"> <p style="color:#ffffff; margin-left: 150px;" align="center">
Andrew Mellen<br/>
Managing Partner<br/>
amellen@maverickentities.com<br/>
432.262.0616 ex.107
</p>
</div>
<div style="float:right">
<p style="color:#ffffff; margin-right: 150px;" align="center">
Jacqueline Mellen<br/>
Managing Partner<br/>
jmellen@maverickentities.com<br/>
432.262.0616 ex.104

</p>
</div>
 </div>
<div align="center" id="footer"> </div>

<div class="cushycms" id="overview_splash" style="display:none; width: 960; height: 1000px; overflow:hidden;"><h1>Overview</h1>
&nbsp;

<p align="center">mav∙er∙ick<br />
noun<br />
someone with an untraditional mindset, not afraid to break from the norm</p>
<br />

&nbsp;
<p align="justify">Founded as a woman-owned civil engineering firm in Midland, Texas, our company embodies the Maverick name simply by doing things differently. With a hands-on, accessible team dedicated to executing projects with innovative, practical, and cost-effective solutions, Maverick exists to be a champion for our clients. We provide straightforward guidance and high-quality solutions without the unnecessary red tape.<br />
<br />
Maverick offers a full range of professional services in civil engineering &amp; surveying, from land planning and development to infrastructure and public works. We work with both private and public sector clients, reviewing the potential and constraints of every site in order to prepare creative plans and development strategies. Maverick is licensed in Texas, New Mexico, and Colorado.<br />
<br />
It is our mission to better the community in which we work and live. We proudly support Big Brothers Big Sisters, MARC of Midland, YMCA Indian Princesses Program, and Washington Math &amp; Science Institute.<br />
<br />
Maverick Engineering is a Maverick Entities company.<br />
&nbsp;</p>

<h2>Affiliations:</h2>


</div>

  <div class="cushycms" id="management_splash" style="display:none; width: 960; height: 2200px; overflow:hidden;"><h1>Management</h1>
&nbsp;

<p>Andrew L. Mellen, Jr., P.E. &ndash; Principal Civil Engineer</p>

<p>With over 13 years of experience in commercial and residential site development, Andrew oversees the design process and approves all plans generated by Maverick, ensuring each project meets the client&rsquo;s objectives from conception to completion. He excels at coordinating multiple stakeholders with a client-oriented approach to satisfy project goals, municipality regulations, and client care. Andrew&rsquo;s experience allows him to look at projects from a global standpoint and foresee potential hurdles, proactively addressing issues and making transparent communication a priority.</p>

<p>Engineering News Record - Texas &amp; Louisiana 2012 Top 20 Under 40 Professionals</p>

<p>Texas Society of Professional Engineers - Permian Basin 2011 Engineer of the Year</p>

<p>Registrations: Texas, New Mexico, Arizona</p>

<p>Jacqueline Mellen &ndash; Operations Manager</p>

<p>Jackie brings more than a decade of business development experience to the table, with a refined skill set focused on the Engineering/Construction industry. Rest of Jackie&rsquo;s bio goes here&hellip;</p>

<p>Andrew Hobby, E.I.T. &ndash; Project Engineer</p>

<p>Andrew is involved in all facets of engineering design and has helped execute over 150 Midland-area projects. Along with wide-ranging commercial and residential site development experience, he has an extensive background in water resources and serves as the lead engineer on drainage analyses and hydrologic studies.</p>

<p>Registrations: Texas</p>
</div>






</div>


</body>
</html>

【问题讨论】：

对我来说看起来不错，除了 1600 的宽度使它离开屏幕。使用百分比作为宽度而不是固定的像素数量。我假设您正在使用非常宽的屏幕。
嗯，标题使用百分比，而主容器只有一个用于桌面媒体查询的最大宽度。然而，酒吧似乎想继续前进。
如果你使用 Firebug 来检查元素，你会发现你弄错了：1600px 的静态宽度应用于#header 选择器：你认为我在哪里得到那个数字，如果不是来自您的 CSS？ :)
谢谢克里斯，我正在查看我的本地代码并发现了问题，我的 FTP 似乎在传输，但实际上并未传输。从这个意义上说，你是对的。

标签： html css position fixed

【解决方案1】：

您的示例代码不正确。在 layout.css 中，#Header 有两条规则，并且（第 303 和 175 行）都使用 width: 1600px; 而不是 width:90.67%; 喜欢包含元素。

更新规则，它工作正常。

【讨论】：

感谢 Cyberduck 出于某种原因即使我告诉它也无法覆盖文件。因此，我非常坚持它不是那样的哈哈。抱歉回复晚了，但非常感谢！