<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。我比較回答，希望能采納
-
慕蓋茨5265433問題解決了嗎？
小白師兄
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 關注
- 1839 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消