一個關(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. node.js - nodejs,express搭建，為什么ejs模板被解析成pre了？2. javascript - postcss-loader在webpack2的使用.3. angular.js - js 點擊事件onclick=“”，引號內(nèi)的函數(shù)名字 可以為 變量嗎4. css3 實現(xiàn)一個線性漸變出現(xiàn)的問題？5. angular.js - Angular中關(guān)于控制器編寫方式的問題6. android - 如何使用view group的bitmap做一個倒影效果，同時忽略scale的view7. linux - 無法使用ifconfig來配置ip信息8. mysql - 關(guān)聯(lián)數(shù)據(jù)表的更新問題9. 求救一下，用新版的phpstudy，數(shù)據(jù)庫過段時間會消失是什么情況？10. mysql - mybatis 查詢 統(tǒng)計某個列數(shù)量 ,根據(jù)一個列,分組查詢,在xml文件如何接收
網(wǎng)公網(wǎng)安備