<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>
2 回答
慕盖茨5265433
TA贡献5条经验 获得超4个赞
说我自己的理解吧，absolute绝对定位，就是改元素，常见的为div和图片，效果是不会被父级的位置影响。
再来说，relative相对定位
举例，ul导航条一般默认的是relative。我比较回答，希望能采纳
小白师兄
TA贡献55条经验 获得超37个赞
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 业界大牛张鑫旭讲的课程!
希望对你有用!
- 2 回答
- 1 关注
- 1725 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消