一個關(guān)于css的定位問題?
問題描述
最近在用react實踐一個類似模態(tài)框的組件,要求在中間彈出一個窗口,實際上這個react bootstrap組件庫中也有相關(guān)實現(xiàn),但是提到:
這個modal要直接渲染到body下面,否則可能出現(xiàn)定位不準(zhǔn)確的問題。
看上去蠻有道理的樣子,react bootstrap實現(xiàn)的過程還費了一番周折,用到了unstable_renderSubtreeIntoContainer這個方法。
但是我始終想不明白什么時候會出現(xiàn)定位不對的問題,因為如果用了fixed,那不就是相對于瀏覽器視窗進(jìn)行定位了么,跟掛在哪一個節(jié)點下有什么關(guān)系??
我大概抽象出來了自己實現(xiàn)的css邏輯:
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Title</title> <style>.modal{ width: 200px; height:200px; position: fixed; top:calc(50% - 100px); left:calc(50% - 100px); background: grey; display: flex;}.modal p{ margin: auto;}.modalOuter{ width: 400px; height:40%; position: fixed;} </style></head><body><div> <div><p>this is a modal</p> </div></div></body></html>
感覺這個class="modal"的div放在哪都可以,并沒有什么所謂的定位不對的問題。
所以想請高手問問:定位不對的問題到底在什么情況下可以浮現(xiàn)?
問題解答
回答1:一個關(guān)于css的定位問題?-PHP中文網(wǎng)問答-一個關(guān)于css的定位問題?-PHP中文網(wǎng)問答
圍觀一下哦,學(xué)習(xí)一下。
回答2:因為fixed元素并不總是相對于視窗進(jìn)行定位的,父元素發(fā)生變換,也就是transfrom屬性發(fā)生改變,如平移或旋轉(zhuǎn),會對固定定位的子元素產(chǎn)生影響。
相關(guān)文章:
1. angular.js - 輸入郵箱地址之后, 如何使其自動在末尾添加分號?2. 管理員信息修改時的密碼問題3. javascript - JS 里面的 delete object.key 到底刪除了什么?4. android - RxJava 中有根據(jù)條件執(zhí)行不同函數(shù)的操作符嗎?5. mysql - 電商如何存儲營業(yè)額數(shù)據(jù)6. javascript - 后臺管理系統(tǒng)左側(cè)折疊導(dǎo)航欄數(shù)據(jù)較多,怎么樣直接通過搜索去定位到具體某一個菜單項位置,并展開當(dāng)前菜單7. javascript - html5的data屬性怎么指定一個function函數(shù)呢?8. javascript - 如何使用nodejs 將.html 文件轉(zhuǎn)化成canvas9. html5 - 為什么使使用vue cli 腳手架,post-css 沒有自動對css3屬性自動添加瀏覽器前綴呢?10. java如何生成token?
