Div后面的包装div浮动在包装器后面

时间：2014-12-17 15:46:26

标签： css css3 z-index fluid-layout

我正在开发流体网格（DreamWeaver CC）网站。我有一个标题-Wrapper div包含使用z-index的堆叠元素。我现在尝试在header-Wrapper之后添加一个div但是这个div在header-Wrapper后面浮动。这是我第一次使用z-index，所以我很沮丧。

我已尝试为mobileNav div设置位置并显示css元素，并尝试使用height元素作为header-wrapper。没有。 mobileNav div似乎完全忽略了header-Wrapper，就像它是gridContainer中的第一个div一样。

感谢您的帮助

网站：miki.nantucket.net/redac-2.php

HTML 

<body>
    <div class="gridContainer clearfix">
        <div id="header-wrapper" class="fluid">
        <div id="rotation" class="fluid "><?php include  $_SERVER['DOCUMENT_ROOT']."/includes/layout/rotations.php" ?></div>
        <div id="Weather" class="fluid "><?php include  $_SERVER['DOCUMENT_ROOT']."/includes/layout/weather.php" ?></div>
        <div id="Navigation" class="fluid "><ul>
        <li>Nav1</li>
        <li>Nav2</li>
        <li>Nav3</li>
        <li>Nav4</li>
        <li>Nav5</li>
        <li>Nav6</li>
        <li>This is not styled yet</li>
        </ul></div>
      </div><!--end header-wrapper-->
      <div id="mobileNav" class="fluid">This is the content for Layout Div Tag "mobileNav"</div>
     </div>
 </body>

CSS 

.fluid {
    clear: both;
    margin-left: 0;
    width: 100%;
    float: left;
    display: block;
}

.fluidList {
    list-style:none;
    list-style-image:none;
    margin:0;
    padding:0;        
}

/* Mobile Layout: 480px and below. */

.gridContainer {
    margin-left: auto;
    margin-right: auto;
    width: 92.625%;
    padding-left: 0;
    padding-right: 0;
    clear: none;
    float: none;
    background-color:#FBFAF6;
}
#header-wrapper {
    position:relative;
    width: 100%;
    padding:0;
    margin:0;
}
#rotation {
    position:absolute;
    z-index:1;

}
#Navigation {
    display:none;   
    width: 100%;
}   
#Weather {
    text-align:right;
    font-size:13px;
    padding:5px 0px 10px 0px;
    position:absolute;
    z-index:50;
    top:0px;
    left:0;
    background: #4b829f;
    background: rgba(75,134,159, .8);
    color: #ffffff;
}
#mobileNav {
    position:relative;
}
.zeroMargin_mobile {
margin-left: 0;
}
.hide_mobile {
display: none;
}

/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */

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

.gridContainer {
    width: 93.4166%;
    padding-left: 0;
    padding-right: 0;
    clear: none;
    float: none;
    margin-left: auto;
}
#header-wrapper {
}
#rotation {
}
#Navigation {
    display:block;
    position:absolute;
    z-index:100;
    top:49px;
    left:0;
    background: #4b8a9f;
  background: rgba(75,134,159, .8);
    color: #ffffff;
    width: 23.7288%;
}
#Weather {
}
#mobileNav {
}
.hide_tablet {
display: none;
}
.zeroMargin_tablet {
margin-left: 0;
}
}

/* 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: 88.875%;
    max-width: 1232px;
    padding-left: 0;
    padding-right: 0;
    margin: auto;
    clear: none;
    float: none;
    margin-left: auto;
}
#header-wrapper {
}
#rotation {
}
#Navigation {
    display:block;
    position:absolute;
    z-index:100;
    top:49px;
    left:0;
    background: #4b8a9f;
    background: rgba(75,134,159, .8);
    color: #ffffff;
    width: 17.7215%;
}
#Weather {
}
#mobileNav {
}
.zeroMargin_desktop {
margin-left: 0;
}
.hide_desktop {
display: none;
}

}

包含响应滑块的CSS 

/*responsive hero slider*/
.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
  }

.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
  }

.rslides li:first-child {
  position: relative;
  display: block;
  float: left;
  }

.rslides img {
  display: block;
  height: auto;
  float: left;
  width: 100%;
  border: 0;
  }
  .caption {
  position: absolute;
  display: block;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px;
  margin:0;
  text-align: center;
  background: #4b8a9f;
  background: rgba(75,134,159, .8);
  color: #ffffff;
  font-size:18px;
  font-stretch:expanded;
}

2 个答案:

答案 0 :(得分：1)

谢谢。由于各种元素，我确实需要绝对定位，但是关于在header-wrapper中允许空间的评论给了我一个想法。我将一个图像放入header-wrapper中，在这里和那里摆弄着z-index属性。可能不是最优雅的方式，但它正在工作！

谢谢。

HTML 

<div class="gridContainer clearfix">
        <div id="header-wrapper" class="fluid">
               <div id="rotation" class="fluid "><?php include  $_SERVER['DOCUMENT_ROOT']."/includes/layout/rotations.php" ?></div>
        <div id="Weather" class="fluid "><?php include  $_SERVER['DOCUMENT_ROOT']."/includes/layout/weather.php" ?></div>
        <div id="Navigation" class="fluid "><ul class="navBump">
        <li>Nav1</li>
        <li>Nav2</li>
        <li>Nav3</li>
        <li>Nav4</li>
        <li>Nav5</li>
        <li>Nav6</li>
        <li>This is not styled yet</li>
        </ul></div>
 <div id="LogoWrapper" class="fluid "><div id="Logo" class="fluid "><img src="images/sitewide/Logo.png"></div><div id="LogoTag" class="fluid "><?php include  $_SERVER['DOCUMENT_ROOT']."/includes/layout/logtag.php" ?></div></div>        
     <img src="images/rotations/redac2/image1a.jpg">
      </div><!--end header-wrapper-->
      <div id="mobileNav" class="fluid">This is the content for Layout Div Tag "mobileNav"</div>
     </div>

CSS 

.fluid {
    clear: both;
    margin-left: 0;
    width: 100%;
    float: left;
    display: block;
}

.fluidList {
    list-style:none;
    list-style-image:none;
    margin:0;
    padding:0;        
}

/* Mobile Layout: 480px and below. */

.gridContainer {
    margin-left: auto;
    margin-right: auto;
    width: 92.625%;
    padding-left: 0;
    padding-right: 0;
    clear: none;
    float: none;
    background-color:#FBFAF6;
}
#header-wrapper {
    position:relative;
    width: 100%;
    padding:0;
    margin:0;
}
#header-wrapper img {
    position:relative;
    z-index:1;
}
#rotation {
    position:absolute;
    top:0;
    left:0;
    z-index:5;  
    margin-left: 0; 
    width: 100%;
}
#Navigation {
    display:none;   
    width: 31.0344%;
    margin-left: 0;
}

#Weather {
    text-align:right;
    font-size:13px;
    padding:5px 0px 10px 0px;
    position:absolute;
    z-index:50;
    top:0px;
    left:0;
    background: #4b829f;
    background: rgba(75,134,159, .8);
    color: #ffffff;
    margin-left: 0;
    width: 100%;
}
#mobileNav {
    z-index:0;
    width: 100%;
    margin-left: 0;
}
#LogoWrapper {
    position:absolute;
    top:0;
    left:0;
    z-index:1000;
}
#Logo {
}
#LogoTag {
    font-size:12px;
    color:#797979;
}
.zeroMargin_mobile {
margin-left: 0;
}
.hide_mobile {
display: none;
}

/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */

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

.gridContainer {
    width: 93.4166%;
    padding-left: 0;
    padding-right: 0;
    clear: none;
    float: none;
    margin-left: auto;
}
#header-wrapper {
}
#rotation {
    width: 100%;
    margin-left: 0;
}
#Navigation {
    display:block;
    position:absolute;
    z-index:100;
    top:49px;
    left:0;
    background: #4b8a9f;
    background: rgba(75,134,159, .8);
    color: #ffffff;
    width: 23.7288%;
    margin-left: 0;
}
#Weather {
    width: 100%;
    margin-left: 0;
}
#mobileNav {
    margin-left: 0;
    width: 100%;
}
#LogoWrapper {
}
#Logo {
}
#LogoTag {
}
.hide_tablet {
display: none;
}
.zeroMargin_tablet {
margin-left: 0;
}
}

/* 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: 88.875%;
    max-width: 1232px;
    padding-left: 0;
    padding-right: 0;
    margin: auto;
    clear: none;
    float: none;
    margin-left: auto;
}
#header-wrapper {
}
#rotation {
    width: 100%;
    margin-left: 0;
}
#Navigation {
    display:block;
    position:absolute;
    z-index:100;
    top:49px;
    left:0;
    background: #4b8a9f;
    background: rgba(75,134,159, .8);
    color: #ffffff;
    width: 24.0506%;
    margin-left: 0;
}
#Weather {
    width: 100%;
    margin-left: 0;
}
#mobileNav {
    width: 100%;
    margin-left: 0;
}
#LogoWrapper {
}
#Logo {
}
#LogoTag {
}
.zeroMargin_desktop {
margin-left: 0;
}
.hide_desktop {
display: none;
}
}

旋转图像CSS 

.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
  }

.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
  }

.rslides li:first-child {
  position: relative;
  display: block;
  float: left;
  }

.rslides img {
  display: block;
  height: auto;
  float: left;
  width: 100%;
  border: 0;
  }
  .caption {
  position: absolute;
  z-index:25;
  display: block;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px;
  margin:0;
  text-align: center;
  background: #4b829f;
  background: rgba(75,134,159, .8);
  color: #ffffff;
  font-size:18px;
  font-stretch:expanded;
}

答案 1 :(得分：0)

您的#mobileNav出现在所有#header-wrapper内容后面，因为所有#header-wrapper内容都在使用position: absolute;。绝对定位的元素（如#Weather和#Navigation）将从文档流中删除，就好像它们永远不存在一样。你可能只想将它们浮动到它们的位置，但是如果需要绝对定位，那么你需要在父元素中用一些空间来解释它们。

相关问题
最新问题