relative處理輪播圖片隱藏切換 開發工具：Adobe Dreamweaver 關鍵技術：CSS樣式定位 作者：黃鵬峰 撰寫時間：2019年1月16日 我們都知道，實現圖片完美切換的輪播效果，在定位方面起到的作用是不言而喻的。下面我就來分享一下這relative相對定位作用所產生的效果。 首先先看一個頁面：  這是一個圖片輪播的第一張圖，在這里就簡單的提一下這布局，圖片輪播都有一個包含的概念在里面，也可以分為三種層次，外層大盒子裝中層的盒子，中層盒子又裝有里層圖片切換的一個個小盒子（每張圖片可當成一個小盒子）。切換效果的原理就是外層大盒子固定，中層盒子裝著里層若干張圖片，通過JS代碼的輪播函數去控制里層盒子的圖片移動，從而實現輪播切換的效果。 外層盒子就類似一個屏幕展示，把里層盒子的圖片按順序一個個的展現出來，然而這就需要中層盒子有足夠的空間把這些里層盒子給裝起來（怎樣設置盒子寬高一致的問題在這里就不詳說了）。因為每張圖片展示都有順序的，那些還沒展示的圖片（相對于外層盒子超出的部分）就得隱藏起來了。 按常規的思維來想，直接加一句overflow:hidden;的代碼就能夠完美將超出部分給隱藏掉了。 然而現實的效果卻是......  看到圖片下方的滾動條了沒 再來一張  拖動了一下滾動條，以上面的那張圖片相比，有沒有發覺頭部和兩邊有什么變化沒（ps:這是同一項目的輪播啊） 這時該是“主角”登場了。在外層盒子加個relative(相對定位) 刷新一下頁面試試效果  滾動條消失了  應該出來的樣式都出來了。 在此說一下這原理：顧名思義，relative(相對定位）就是外層盒子相對于中層的盒子定位，中層盒子就用absolute(絕對定位）固定其中，然后里面的圖片一張張的切換，就像你拿一個框子透過它按順序看放在桌子排列好的一張張圖片這樣，這種關系就有點類似物理上的運動與靜止。

總結

以上是生活随笔為你收集整理的relative处理轮播图片隐藏切换的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。