Question

我有一个小问题：

我有一个包含按钮的html文件，然后是一个链接列表。两个元素（按钮和列表）都位于页面的右侧，列表显示在按钮上方，因为它是在html文件中的按钮之后写的。它们都是可点击的。我的问题是关于滚动条，它应该出现在右侧的列表中，但他出现在按钮后面。我尝试通过将z-index：-1添加到按钮样式（#Rand_users）来解决它它解决了它，但使按钮不可点击。

<html>
<head>
    <meta charset="windows-1255">
    <title>page</title>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.css" />

</head> 
<body>
<div id="fixed-header"></div> 
<div id="center"> 
<button id="rand_users" style="bottom:-5px;left:1017px;" onclick="window.alert('button 4');">button 4</button>
<button id="rand_users" style="bottom:160px;left:1017px;" onclick="window.alert('button 9');">button 9</button>
<!-- <button id="rand_users" style="bottom:325px;left:1017px;" onclick="window.alert('button 12');">button 12</button> -->
<ul id="list" >
  <li><a href="" onclick="window.alert('link1');" class="le" >1 </a></li>
  <li><a href="" class="le" >2</a></li>
  <li><a href="" class="le" >3</a></li>
  <li><a href="" class="le" >4</a></li>
  <li><a href="" class="le" >5</a></li>
  <li><a href="" class="le" >6</a></li>
  <li><a href="" class="le" >7</a></li>
  <li><a href="" class="le" >8</a></li>
  <li><a href="" class="le" >9</a></li>
  <li><a href="" class="le" >10</a></li>
  <li><a href="" class="le">11</a></li>
  <li><a href="" class="le" >12</a></li>
  <li><a href="" class="le" >13</a></li>
  <li><a href="" class="le" >14</a></li>
  <li><a href="" class="le" >15</a></li>
  <li><a href="" class="le" >16</a></li>
  <li><a href="" class="le" >17</a></li>
  <li><a href="" class="le" >18</a></li>
  <li><a href="" class="le" >19</a></li>
  <li><a href="" class="le" >20</a></li>
</ul> 
</div>  
<div id="fixed-footer"></div>
</body>
</html>

css代码：

  div#fixed-header {
    z-index:1;
    height:120px;
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    background:black;
}

    div#center {
    position:fixed;
    top:120px;
    bottom:35px;
    width:100%;
    background:white;
}

    div#fixed-footer {
    height:35px;
    position:fixed;
    bottom:0px;
    left:0px;
    width:100%;
    background:black;
}

    #list
    {   
    list-style-type:none;
    text-align:right;
    list-style-position: inside;
    overflow:hidden; 
    overflow-y:scroll;
    height:100%;
}

    #list a:hover {
    color: black;
    text-decoration: underline;
}

    #rand_users 
    /* button */
    {
    /*  z-index:-1;  */
    position:absolute;   
    width: 350px;
    height: 170px;
    background: yellow;
    border: 5px solid blue; 
}

    .le {
    display: inline-block;
    position: relative;
    background: grey;
    padding: 5px  15px 5px 15px;
    color: white;
    font-size: 15px;
    font-weight: bold;
}

    .le:after {
    content: '';
    display: block;  
    position: absolute;
    right: 100%;
    top: 33%;
    margin-top: -10px;
    width: 0;
    height: 0;
    }

谢谢！

Answer 1

如果你唯一的问题是

我的问题是关于滚动条，它应该出现在列表在右侧，但他出现在按钮后面

然后尝试运行下面的代码段，稍微调整一下。

＆＃13;

 div#fixed-header {
	z-index:1;
	height:10%;
	position:fixed;
	top:0px;
	left:0px;
	width:100%;
	background:black;
}
div#center {
	position:fixed;
	top:10%;
	bottom:35px;
	width:100%;
	background:white;
}
div#fixed-footer {
	height:35px;
	position:fixed;
	bottom:0px;
	left:0px;
	width:100%;
	background:black;
}

#list
{	
	list-style-type:none;
  text-align:right;
  list-style-position: inside;
  overflow:hidden; 
  overflow-y:scroll;
	height:100%;
  position: fixed;
  right: 0;
  top: 10%;
  width:80px;
}
#list > li {
  min-width: 30px;
}
#list a:hover {
    color: black;
    text-decoration: underline;
}

.rand_users /* button */
{
 	position:absolute;   
	width: 350px;
	height: 170px;
	background: yellow;
	border: 5px solid blue;	
    right: 0;
}

.le {
  display: inline-block;
  position: relative;
  background: grey;
  padding: 5px  15px 5px 15px;
  color: white;
  font-size: 15px;
  font-weight: bold;
  min-width: 25px;
}
.le:after {
	content: '';
	display: block;  
	position: absolute;
	right: 100%;
	top: 33%;
	margin-top: -10px;
	width: 0;
	height: 0;
}

＆＃13;

> 

<body>
<div id="fixed-header"></div> 
<div id="center">  

<button class="rand_users" style="bottom:-5px;" onclick="window.alert('button 4');">button 4</button>
<button class="rand_users" style="bottom:160px;" onclick="window.alert('button 9');">button 9</button>
<!-- <button id="rand_users" style="bottom:325px;left:1017px;" onclick="window.alert('button 12');">button 12</button> -->

<ul id="list" >
  <li><a href="" onclick="window.alert('link1');" class="le" >1 </a></li>
  <li><a href="" class="le" >2</a></li>
  <li><a href="" class="le" >3</a></li>
  <li><a href="" class="le" >4</a></li>
  <li><a href="" class="le" >5</a></li>
  <li><a href="" class="le" >6</a></li>
  
  <li><a href="" class="le" >7</a></li>
  <li><a href="" class="le" >8</a></li>
  <li><a href="" class="le" >9</a></li>
  <li><a href="" class="le" >10</a></li>
  
  <li><a href="" class="le">11</a></li>
  <li><a href="" class="le" >12</a></li>
  <li><a href="" class="le" >13</a></li>
  <li><a href="" class="le" >14</a></li>
  
  <li><a href="" class="le" >15</a></li>
  <li><a href="" class="le" >16</a></li>
  <li><a href="" class="le" >17</a></li>
  
   <li><a href="" class="le" >18</a></li>
  <li><a href="" class="le" >19</a></li>
  <li><a href="" class="le" >20</a></li>
</ul> 
</div>  


<div id="fixed-footer"></div>

</body>

＆＃13;

Answer 2

尝试在代码 Demo

中添加css reset

*{
  margin:0;
  padding:0;
}

列表及其滚动条的不同z-index

2 个答案: