Question

标题解释了我想要实现的目标，这是代码： -

HTML

<div id="header-shadow"></div>
<div id="block">
  <div id="square"></div>
</div>

CSS

#header-shadow {
    background: url(http://planetbounce.m360.co.uk/wp-content/themes/planetbounce/assets/img/header-shadow.png);
    background-repeat: repeat-x;
    display: block;
    width: 100%;
    height: 10px;
    z-index: 0;
    position: fixed;
    top: 100px;
}

#block{
    height:1000px;
}

#square{
    height: 100px;
    width: 100px; background: red;
    margin-top: 200px;
    display: block;
    z-index: 9999999;
    opacity: 1;
}

JSFiddle

如您所见，滚动#square位于背景图片下方，有没有办法在#header-shadow上显示？

Answer 1

是的，就像这样，你可以删除z-index并将position: relative设置为#block。

＆＃13;

#header-shadow {
    background: url(http://planetbounce.m360.co.uk/wp-content/themes/planetbounce/assets/img/header-shadow.png);
    background-repeat: repeat-x;
    display: block;
    width: 100%;
    height: 10px;
    position: fixed;
    top: 100px;
}

#block{
  position: relative;
  height:1000px;
}

#square{
  height: 100px; width: 100px; background: red; 
  margin-top: 200px; display: block; opacity: 1;
}

＆＃13;

<div id="header-shadow"></div>
<div id="block">
  <div id="square"></div>
</div>

＆＃13;

在div元素下设置固定透明背景图像

1 个答案: