【发布时间】：2014-12-18 22:51:04
【问题描述】：
我正在开发一个流体网格 (DreamWeaver CC) 网站。我有一个包含使用 z-index 堆叠元素的 header-Wrapper div。我现在尝试在 header-Wrapper 之后添加一个 div，但这个 div 浮动在 header-Wrapper 后面。这是我第一次使用 z-index，所以我很困惑。
我已尝试为 mobileNav div 定位和显示 css 元素，还尝试为 header-wrapper 使用 height 元素。没有什么。 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;
}
【问题讨论】：
标签： css z-index fluid-layout