一個關于css的定位問題？
問題描述
最近在用react實踐一個類似模態框的組件，要求在中間彈出一個窗口，實際上這個react bootstrap組件庫中也有相關實現，但是提到：
這個modal要直接渲染到body下面，否則可能出現定位不準確的問題。
看上去蠻有道理的樣子，react bootstrap實現的過程還費了一番周折，用到了unstable_renderSubtreeIntoContainer這個方法。
但是我始終想不明白什么時候會出現定位不對的問題，因為如果用了fixed，那不就是相對于瀏覽器視窗進行定位了么，跟掛在哪一個節點下有什么關系？？
我大概抽象出來了自己實現的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放在哪都可以，并沒有什么所謂的定位不對的問題。
所以想請高手問問：定位不對的問題到底在什么情況下可以浮現？
問題解答
回答1：一個關于css的定位問題？-PHP中文網問答-一個關于css的定位問題？-PHP中文網問答
圍觀一下哦，學習一下。
回答2：因為fixed元素并不總是相對于視窗進行定位的，父元素發生變換，也就是transfrom屬性發生改變，如平移或旋轉，會對固定定位的子元素產生影響。
相關文章：
1. python - django 里自定義的 login 方法，如何使用 login_required()2. python如何不改動文件的情況下修改文件的 修改日期3. angular.js - Angular路由和express路由的組合使用問題4. angular.js - angularjs 用ng-reapt渲染的dom 怎么獲取上面的屬性5. mysql優化 - mysql count(id)查詢速度如何優化?6. 主從備份 - 跪求mysql 高可用主從方案7. css3 - [CSS] 動畫效果 3D翻轉bug8. angular.js - 不適用其他構建工具，怎么搭建angular1項目9. mysql主從 - 請教下mysql 主動-被動模式的雙主配置 和 主從配置在應用上有什么區別？10. node.js - node_moduls太多了
![css3 - [CSS] 動畫效果 3D翻轉bug](http://www.cgvv.com.cn/attached/image/news/202304/110831f073.png)
網公網安備