CSS3的變換對(duì)定位參照的影響

2023-12-27 分類：網(wǎng)站建設(shè)

通常情況下fixed定位的元素都是相對(duì)于文檔的。即使fixed定位的元素所在的容器是relative、absolute，甚至也是一個(gè)fixed定義的，內(nèi)部的fixed定位元素依然不受其影響，直接相對(duì)于文檔。但在一些特殊情況下fixed的參照對(duì)象確實(shí)可以發(fā)生改變。下面這個(gè)測(cè)試是讓fixed定義的元素分別呆在absolute、relative、fixed中運(yùn)行<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>

結(jié)果很明顯，fixed總是相對(duì)于文檔的。通常情況下就是這樣了，但CSS3中引入了新特性，這些新特新就可能影響到fixed定位的參照。現(xiàn)在我們對(duì)fixed定位的元素所在的容器做一個(gè)CSS3的變換如何？比如旋轉(zhuǎn)0度運(yùn)行<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暫未支持這個(gè)特性，Chrome和Firefox都已經(jīng)支持了。當(dāng)如果把上面測(cè)試中的fixed改為absolute就全都能兼容。這就意味著，CSS3的變換可以改變其子元素的定位參照物。即使position是static的容器，只要做了變換就都可以作為子元素定位的參照對(duì)象。上面的旋轉(zhuǎn)0度只是個(gè)例子，換成其它變換也無(wú)妨。

文章題目：CSS3的變換對(duì)定位參照的影響
轉(zhuǎn)載來(lái)于：http://www.rwnh.cn/news25/310625.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供電子商務(wù)、建站公司、外貿(mào)網(wǎng)站建設(shè)、搜索引擎優(yōu)化、網(wǎng)站維護(hù)、動(dòng)態(tài)網(wǎng)站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

CSS3的變換對(duì)定位參照的影響