CSS3的變換對定位參照的影響

2023-12-27 分類：網站建設

通常情況下fixed定位的元素都是相對于文檔的。即使fixed定位的元素所在的容器是relative、absolute，甚至也是一個fixed定義的，內部的fixed定位元素依然不受其影響，直接相對于文檔。但在一些特殊情況下fixed的參照對象確實可以發生改變。下面這個測試是讓fixed定義的元素分別呆在absolute、relative、fixed中運行<style> body {margin:0px;} body>div { width:50px;height:50px;left:30px;top:30px; border:1px solid red; } body>div:nth-child(1) {position:absolute;} body>div:nth-child(2) {position:relative;} body>div:nth-child(3) {position:fixed;} body>div>div { position:fixed;border:1px solid blue; width:10px;height:10px;left:10px;top:10px; } </style> <body> <div><div></div></div> <div><div></div></div> <div><div></div></div> </body>

結果很明顯，fixed總是相對于文檔的。通常情況下就是這樣了，但CSS3中引入了新特性，這些新特新就可能影響到fixed定位的參照。現在我們對fixed定位的元素所在的容器做一個CSS3的變換如何？比如旋轉0度運行<style> body {margin:0px;} body>div { width:50px;height:50px;margin:30px; border:1px solid red; -webkit-transform:rotate(0deg); transform:rotate(0deg); } body>div>div { position:fixed;border:1px solid blue; width:10px;height:10px;left:10px;top:10px; } </style> <div><div></div></div>

只有IE暫未支持這個特性，Chrome和Firefox都已經支持了。當如果把上面測試中的fixed改為absolute就全都能兼容。這就意味著，CSS3的變換可以改變其子元素的定位參照物。即使position是static的容器，只要做了變換就都可以作為子元素定位的參照對象。上面的旋轉0度只是個例子，換成其它變換也無妨。

文章題目：CSS3的變換對定位參照的影響
轉載來于：http://m.kartarina.com/news25/310625.html

成都網站建設公司_創新互聯，為您提供電子商務、建站公司、外貿網站建設、搜索引擎優化、網站維護、動態網站

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創新互聯

猜你還喜歡下面的內容

成都外貿網站設計 2023-12-27
網站設計的三大原則 2023-12-27
網站設計風格有很多種。讓我們看看哪個適合你。 2023-12-27
外貿網站開發報價 2023-12-27
成都企業建站之企業網站開發有哪些基本費用？ 2023-12-27
企業做網站選擇“仿站”仿誰、怎么仿有學問(企業做網站的目的) 2023-12-27
成都網站建設的六大方法提高質量 2023-12-27