Javascript 如何在固定图元上方显示非固定图元_Javascript_Jquery_Html_Css_Fade

Javascript 如何在固定图元上方显示非固定图元

javascript jquery html css

Javascript 如何在固定图元上方显示非固定图元,javascript,jquery,html,css,fade,Javascript,Jquery,Html,Css,Fade,我有一个包含固定和非固定元素的页面。我使用一个div使背景变成蓝色，然后淡出，在html-css中显示它后面的黑色背景。问题是，我的天际线图像不是固定的，没有任何东西可以将其推到固定元素之上，甚至z索引也不行。将此元素推到固定背景div上方的适当方式是什么简言之，问题是我想要我城市背后的蓝天下面是蓝色背景div的css .blue { position:fixed; height: 100%; width: 100%; background-color: #6e8eb5; } 我是这样淡出

我有一个包含固定和非固定元素的页面。我使用一个div使背景变成蓝色，然后淡出，在html-css中显示它后面的黑色背景。问题是，我的天际线图像不是固定的，没有任何东西可以将其推到固定元素之上，甚至z索引也不行。将此元素推到固定背景div上方的适当方式是什么

简言之，问题是我想要我城市背后的蓝天

下面是蓝色背景div的css

.blue {
position:fixed;
height: 100%;
width: 100%;
background-color: #6e8eb5;
}

我是这样淡出的

$( ".blue" ).delay( 12000 ).fadeOut(2000);

这是我的护照

在这里：

我还固定了元素的位置，等等，因为我想你们打算定位它们

HTML

你到底想完成什么而失败了？如果我理解正确，你希望你的蓝天留在你的城市后面？我不太确定我是否理解你想完成什么。。。如果我理解正确。。。您是否尝试过对固定元素使用负索引？您可以在css.negativeZIndex{z-index:-1000；}中创建一个类，然后在效果出现后，使用.addClass.negativeZIndex；将该类添加到要隐藏在城市天际线图像后面的元素中；。我刚试过这个，它对我有效。addClassnegativeZIndex；*不小心在那里掉了一个点，太晚了，无法编辑最后一个后更正鲍勃，我想要城市后面的蓝天

<body>
    <div class="blue"></div>
     <h2 id="text1">a web design demonstration</h2>

     <h3 id="text2">by cory</h3>

    <img id="cloud2" src="http://www.rapitech.net/wp-content/uploads/2013/11/tumblr_ms59qmrRWf1s5jjtzo1_r1_500.png">
    <img id="jacksonville" src="http://upload.wikimedia.org/wikipedia/commons/f/fc/Cincinnati_Skyline_Outline.png" class="img-responsive" alt="Responsive image">
</body>

html {
    background-color: black;
    overflow-x: hidden;
}
body {
    display: none;
    background-color: #6e8eb5;
}
#cloud2 {
    margin-top:800px;
    left: -100px;
    height:150px;
    opacity: 0.4;
}
#text1, #text2 {
    opacity: 0.0;
    color: black;
    font-family: Georgia, serif;
    color: white;
    position: fixed;
    margin-bottom: 200px;
    width: 75%;
    left: 50%;
    margin: 0 0 0 -37.5%;
    text-align:center;
}
.blue {
    position:fixed;
    height: 100%;
    width: 100%;
    background-color: #6e8eb5;
    z-index:-100;
}

$("body").fadeIn(2000);

$("html, body").animate({
    scrollTop: $(document).height()
}, 8000);

$("#cloud2").animate({
    opacity: 0.8,
    marginLeft: "110%"
}, 30000);

$("#text1").delay(1500).animate({
    opacity: 0.5,
    marginTop: "15%"
}, 4000);
$("#text2").delay(5000).animate({
    opacity: 0.5,
    marginTop: "20%"
}, 4000);
$("#text1").delay(500).animate({
    opacity: 0.0,
    marginLeft: "60%"
}, 2000);
$("#text2").delay(1500).animate({
    opacity: 0.0,
    marginLeft: "30%"
}, 2000);

$(".blue").delay(12000).fadeOut(2000);