Question

我希望这个div位于我的页面顶部，它将在我的整个页面中保持固定，并且将重叠任何交叉元素。就像facebook上面的顶级蓝色搜索栏一样。当我向下滚动时，桌子高于div，但我希望相反。那么这里是代码。当我使用z-index时，我div上的图像会变黄。

<!DOCTYPE html>
<html>
<head>
<style>

#fixedDiv{                  
position:fixed;
z-index:1;
top:0px;
left:0px;
border:3px groove blue;
height:200px;
width:1360px;
background-color:yellow;
opacity:.4;
margin-right:10px;
}

p.fixPara{  
z-index:1;              
position:fixed;
letter-spacing:20px;
font-size:50px;
font-weight:bold;
color:purple;
top:20px;
left:7em;
}

table{
background-color:white;
border:3px outset navy;
width:700px;
height:500px;
margin-top:1000px;
margin-left:300px;
}

tr>td{
padding:15px;
font-size:20px;
text-align:center

</style>
</head>

<body>

<div id="fixedDiv"><p class="fixPara">This is Fixed!!</p></div>

<img src="grass.jpg" style="position:fixed;right:3px;top:3px;" height=100px width=150px>
<img src="black.jpg" style="position:fixed;top:3px;left:3px;" height=100px; width=150px>

<table>
    <tr>
        <th colspan="3"><h2>VISIT THE SUITABLE LINK</h2></th>
    </tr>
        <td>Google</td>
        <td>Youtube</td>
        <td>Facebook</td>
    </tr>

    <tr>
        <td>Kickass to</td>
        <td>JAVA</td>
        <td>Apple</td>
    </tr>

</table>    

</body>
</html>

添加FIDDLE

Answer 1

首先关闭最后的CSS样式，你需要删除不透明度并添加img代码z-index:5;

DEMO

#fixedDiv {
    background-color: yellow;
    border: 3px groove blue;
    height: 200px;
    left: 0;
    margin-right: 10px;
    opacity: 0.4;/*remove*/
    position: fixed;
    top: 0;
    width: 1360px;
    z-index: 1;
}

Answer 2

你走了;

HTML：

<div id="fixedDiv"><div class="opacity"><p class="fixPara">This is Fixed!!</p></div></div>

的CSS：

.opacity {
 background-color: rgba(255, 255, 0, 0.4) !important; 
width: 100%;
height: 200px;

}

#fixedDiv {background-color:#fff !Important}

http://jsfiddle.net/sunil_hari/C2wGk/12/

顶部的z-index固定div似乎不起作用

2 个答案: