Question

所以我希望整个页面都超过前一页。但只有背景发生变化，所有文本都可以同时显示。

请亲自看看..

<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/

Answer 1

将position: relative添加到您的li

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

＆＃13;

$(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;
		}
	});
});

＆＃13;

*{
	margin: 0;
	padding: 0;
}
ul{
	list-style: none;
	font-size: 4em;
}
li { position: relative; }
#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;
}

＆＃13;

<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>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

＆＃13;

Answer 2

在relative等css中使用li position : relative位置。 Static是默认值。

Answer 3

z-index仅适用于定位元素。因此，为了将元素放在其他每个元素上添加position: relative。

我该如何解决这个问题

3 个答案: