Question

我想要一个固定的标题，固定的左侧菜单，固定的右侧菜单和固定的页脚，中间有可滚动的内容。我在下面做了这个代码，但是我不知道如何将下拉列表放在其他DIV上。即使z-index为10，它总是落后于一切。

<header>
    <div id="dropdown"></div>
</header>

<div id="menuleft"></div>
<div id="content"></div>
<div id="menuright"></div>

<footer></footer>

请在此处使用css：http://jsfiddle.net/hdkmvxhb/26/

进行检查

Answer 1

检查一下使用以下Css 如需演示，请查看：http://jsfiddle.net/nikkirs/tge195y8/19/

header{
width:100%;
    height:49px;
    position:fixed;
    background:#000;
}
.container{
    width:100%;
    position:relative;
    min-height:400px;
    padding-top: 50px
}
.left_container{
position:fixed;   
    width:30%;
    border-right:1px solid #000;
     min-height:400px;
    left:0px;
}
.middle_container{
  width:30%;  
     min-height:400px;
    float: left;
}
.right_container{
    position:fixed;
     width:30%;
     border-left:1px solid #000;
     min-height:400px;
    right:0px;
}
footer{
    position:fixed;
    height:30px;
    background:#000;
    width:100%;
}
ul {
  text-align: left;
  display: inline;
  margin: 0;
  padding: 15px 4px 17px 0;
  list-style: none;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
ul li {
  font: bold 12px/18px sans-serif;
  display: inline-block;
  margin-right: -4px;
  position: relative;
  padding: 15px 20px;
  background: #fff;
  cursor: pointer;

}
ul li:hover {
  background: #555;
  color: #fff;
}
ul li ul {
  padding: 0;
  position: absolute;
  top: 48px;
  left: 0;
  width: 150px;
display:none;
  display: block;
  opacity: 1;

}
ul li ul li { 
  background: #555; 
  display: block; 
  color: #fff;
  text-shadow: 0 -1px 0 #000;
}
ul li ul li:hover { background: #666; }
ul li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
}

Answer 2

<强> FS FIDDLE DEMO

<强> HTML

<header>
    <div id="dropdown-mouseover"></div>
</header>
<div id="menuleft">Menu left</div>
<div id="menuright">Menu Right</div>
<div id="content">
The standard Lorem Ipsum passage, used since the 1500s

"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</div>

<footer>Footer</footer>

<强> CSS

header
{
    position:fixed;
    top:0px;
    left:0px;
    background: #FC7474;
    padding:20px;
    width:100%;
}
#menuleft
{
    position: fixed;
    left:0px;
    top:40px;
        width: 40px; 
      background: green;
    padding:5px;
    height:100%;
}
#menuright
{
    position: fixed;
    right:0px;
    top:40px;
        width: 40px; 
      background: green;
    padding:5px;
    height:100%;
}
#content
{
    padding: 50px;
}
footer
{
    position:fixed;
    bottom:0px;
    background:#000;
    padding:20px;
    width:100%;
    color: #fff;
}

<强> FS FIDDLE DEMO

Answer 3

将您的HTML代码更改为以下代码。另外，我已将#dropdown { CSS替换为dropdown {

HTML：

<header>
    <div id="dropdown">
        <select>
            <option value="0">Select</option>
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
        </select>
    </div>
</header>
<div id="menuleft"></div>
<div id="content"></div>
<div id="menuright"></div>

<footer></footer>

CSS：

header {
   position: fixed;
   width: 100%;
   height: 25px;
   background-color: gray;
}

select {
    position: absolute;
}

Working DEMO

5个固定的div，相对div

3 个答案: