一個關于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. docker不顯示端口映射呢?2. angular.js - 關于$apply()3. 關docker hub上有些鏡像的tag被標記““This image has vulnerabilities””4. macos - mac下docker如何設置代理5. MySQL數據庫中文亂碼的原因6. docker - 各位電腦上有多少個容器啊?容器一多,自己都搞混了,咋辦呢?7. docker gitlab 如何git clone?8. mysql - 新浪微博中的關注功能是如何設計表結構的?9. css - C#與java開發Windows程序哪個好?10. docker-compose 為何找不到配置文件?
