这是一个3d翻页效果。看不懂里面position：relative；和position：absolute；的作用？

<html>
	<head>
	<title></title>
	<style>
	#my3dspace{
	-webkit-perspective: 800;
	-webkit-perspective-origin: 50% 50%;

	overflow:hidden;
	}
	#pagegroup{
	width:400px;
	height:400px;
	margin:0 auto;

	-webkit-transform-style:preserve-3d;

	position: relative;
	}
	.page{
	width:360px;
	height:360px;
	padding:20px;
	background-color: black;

	color:white;

	font-weight:bold;
	font-size:360px;
	line-height:360px;
	text-align:center;

	position:absolute;
	}
	#page1{
	-webkit-transform-origin:bottom;
	-webkit-transition: -webkit-transform 1s linear;
	}
	#page2,#page3,#page4,#page5,#page6{
	-webkit-transform-origin:bottom;
	-webkit-transition: -webkit-transform 1s linear;
	-webkit-transform: rotateX(90deg);
	}

	#op{
	text-align:center;
	margin: 40px auto;
	}
	</style>

	<script type="text/javascript">

	var curIndex = 1;

	function next(){

	if( curIndex == 6 )
	return;

	var curPage = document.getElementById("page"+curIndex);
	curPage.style.webkitTransform = "rotateX(-90deg)";

	curIndex ++;
	var nextPage = document.getElementById("page"+curIndex);
	nextPage.style.webkitTransform = "rotateX(0deg)";
	}

	function prev(){

	if( curIndex == 1 )
	return;

	var curPage = document.getElementById("page"+curIndex);
	curPage.style.webkitTransform = "rotateX(90deg)";

	curIndex --;
	var prevPage = document.getElementById("page"+curIndex);
	prevPage.style.webkitTransform = "rotateX(0deg)";
	}
	</script>
	</head>
	<body>
	<div id="my3dspace">
	<div id="pagegroup">
	<div class="page" id="page1">1</div>
	<div class="page" id="page2">2</div>
	<div class="page" id="page3">3</div>
	<div class="page" id="page4">4</div>
	<div class="page" id="page5">5</div>
	<div class="page" id="page6">6</div>
	</div>
	</div>

	<div id="op">
	<a href="javascript:next()">next</a> <a href="javascript:prev()">previous</a>
	</div>
	</body>
	</html>

qq_独坐一隅_0

浏览 1766回答 2

2回答

慕盖茨5265433

说我自己的理解吧，absolute绝对定位，就是改元素，常见的为div和图片，效果是不会被父级的位置影响。再来说，relative相对定位举例，ul导航条一般默认的是relative。我比较回答，希望能采纳

小白师兄

position:relative;与position:absolute;叫做相对布局和绝对布局,作用是对具体的容器进行定位,相对布局和绝对布局是页面设计中常用的布局形式,它脱离了文档流.一般情况下,如果对一个盒子进行绝对布局,那么必须要对其父盒子声明相对布局才会起效果,如果盒子没有自定义父盒子,那么浏览器会默认body为它的父盒子一般情况下,可以遵循"子绝父相"的思路来进行绝对定位!举个栗子: <style type="text/css"> .parent{ width:100%; height: 500px; position:relative; } .son{ position: absolute; width:200px; height: 300px; top:100px; left:30px; } </style>.son中的top和left就是对定位的位置描述!不过建议你在这个网站上去看看关于postion的课程,都讲的很好!比如说深入理解absolute 业界大牛张鑫旭讲的课程! 希望对你有用!

随时随地看视频慕课网APP