这是一个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
Html/CSS