我該如何解決這個問題

-2

所以我希望整個頁面能夠覆蓋上一頁。但只有背景變化，所有的文字都可以立即看到。我該如何解決這個問題

請看看自己..

<style> 
*{ 
    margin: 0; 
    padding: 0; 
} 
ul{ 
    list-style: none; 
    font-size: 4em; 
} 
#a{ 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    overflow: hidden; 
} 
.btn{ 
    position: fixed; 
    background: white; 
    z-index: 999; 
    cursor: pointer; 
} 
.next{ 
    right: 0; 
    top: 20px; 
} 
.prev{ 
    right: 0; 
    top: 40px; 
} 
</style> 
<body> 
    <div class="btn next">Next</div> 
    <div class="btn prev">Prev</div> 
    <div id="a">  
     <ul> 
      <li>aaa</li> 
      <li>bbb</li> 
      <li>ccc</li> 
      <li>ccc</li> 
     </ul> 
    </div> 
</body>

和JavaScript這樣的：

$(document).ready(function(){ 
    $('li:nth-child(1)').css({'background':'lightgreen', 'z-index':'1'}); 
    $('li:nth-child(2)').css({'background':'gray', 'z-index':'2'}); 
    $('li:nth-child(3)').css({'background':'yellow', 'z-index':'3'}); 
    $('li:nth-child(4)').css({'background':'teal', 'z-index':'4'}); 
    var width = $(window).width(); 
    var height = $(window).height(); 
    $('#a').css({'height':height, 'width':width}); 
    $('li').css({'height':height, 'width':width}); 

    var theFirst = 2; 
    $('.next').click(function(){ 
     if(theFirst == 2){ 
      $('li:nth-child(2)').animate({'margin-top':'-='+height}, 1500);  
      theFirst++; 
     }else if(theFirst == 3){ 
      $('li:nth-child(3)').animate({'margin-top':'-='+height}, 1500);  
      theFirst++; 
     }else if(theFirst == 4){ 
      $('li:nth-child(4)').animate({'margin-top':'-='+height}, 1500);  
      theFirst++; 
     }else if(theFirst == 5){ 
      $('li:nth-child(5)').animate({'margin-top':'-='+height}, 1500);     
     }else{ 
      null; 
     } 
    }); 
});

和的jsfiddle是： https://jsfiddle.net/manukarki/wmzskcdq/2/

來源

2017-02-17 Manu Karki

添加position: relative您li的

https://jsfiddle.net/wmzskcdq/4/

$(document).ready(function(){ 
 
\t $('li:nth-child(1)').css({'background':'lightgreen', 'z-index':'1'}); 
 
\t $('li:nth-child(2)').css({'background':'gray', 'z-index':'2'}); 
 
\t $('li:nth-child(3)').css({'background':'yellow', 'z-index':'3'}); 
 
\t $('li:nth-child(4)').css({'background':'teal', 'z-index':'4'}); 
 
\t var width = $(window).width(); 
 
\t var height = $(window).height(); 
 
\t $('#a').css({'height':height, 'width':width}); 
 
\t $('li').css({'height':height, 'width':width}); 
 
\t 
 
\t var theFirst = 2; 
 
\t $('.next').click(function(){ 
 
\t \t if(theFirst == 2){ 
 
\t \t \t $('li:nth-child(2)').animate({'margin-top':'-='+height}, 1500); \t \t 
 
\t \t \t theFirst++; \t 
 
\t \t }else if(theFirst == 3){ 
 
\t \t \t $('li:nth-child(3)').animate({'margin-top':'-='+height}, 1500); \t \t 
 
\t \t \t theFirst++; \t 
 
\t \t }else if(theFirst == 4){ 
 
\t \t \t $('li:nth-child(4)').animate({'margin-top':'-='+height}, 1500); \t \t 
 
\t \t \t theFirst++; \t 
 
\t \t }else if(theFirst == 5){ 
 
\t \t \t $('li:nth-child(5)').animate({'margin-top':'-='+height}, 1500); \t \t \t \t \t 
 
\t \t }else{ 
 
\t \t \t null; 
 
\t \t } 
 
\t }); 
 
});

*{ 
 
\t margin: 0; 
 
\t padding: 0; 
 
} 
 
ul{ 
 
\t list-style: none; 
 
\t font-size: 4em; 
 
} 
 
li { position: relative; } 
 
#a{ 
 
\t position: absolute; 
 
\t top: 0px; 
 
\t left: 0px; 
 
\t overflow: hidden; 
 
} 
 
.btn{ 
 
\t position: fixed; 
 
\t background: white; 
 
\t z-index: 999; \t 
 
\t cursor: pointer; 
 
} 
 
.next{ 
 
\t right: 0; 
 
\t top: 20px; 
 
} 
 
.prev{ 
 
\t right: 0; 
 
\t top: 40px; 
 
}

<body> 
 
\t <div class="btn next">Next</div> 
 
\t <div class="btn prev">Prev</div> 
 
\t <div id="a"> \t 
 
\t \t <ul> 
 
\t \t \t <li>aaa</li> 
 
\t \t \t <li>bbb</li> 
 
\t \t \t <li>ccc</li> 
 
\t \t \t <li>ccc</li> 
 
\t \t </ul> 
 
\t </div> 
 
</body> 
 
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

來源

2017-02-17 16:35:13

好吧，那很容易。謝謝：）。 –

@ManuKarki不客氣。你可能也不需要z索引。 –

使用relative在CSS的li位置像position : relative。 Static是默認值。

來源

2017-02-17 16:35:06

z-index只能在定位元素。因此，爲了將其他元素添加到其中的每一個position: relative。

來源

2017-02-17 16:36:26

我該如何解決這個問題

回答

相關問題