一個(gè)關(guān)于css的定位問(wèn)題？
問(wèn)題描述
最近在用react實(shí)踐一個(gè)類似模態(tài)框的組件，要求在中間彈出一個(gè)窗口，實(shí)際上這個(gè)react bootstrap組件庫(kù)中也有相關(guān)實(shí)現(xiàn)，但是提到：
這個(gè)modal要直接渲染到body下面，否則可能出現(xiàn)定位不準(zhǔn)確的問(wèn)題。
看上去蠻有道理的樣子，react bootstrap實(shí)現(xiàn)的過(guò)程還費(fèi)了一番周折，用到了unstable_renderSubtreeIntoContainer這個(gè)方法。
但是我始終想不明白什么時(shí)候會(huì)出現(xiàn)定位不對(duì)的問(wèn)題，因?yàn)槿绻昧薴ixed，那不就是相對(duì)于瀏覽器視窗進(jìn)行定位了么，跟掛在哪一個(gè)節(jié)點(diǎn)下有什么關(guān)系？？
我大概抽象出來(lái)了自己實(shí)現(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>
感覺(jué)這個(gè)class="modal"的div放在哪都可以，并沒(méi)有什么所謂的定位不對(duì)的問(wèn)題。
所以想請(qǐng)高手問(wèn)問(wèn)：定位不對(duì)的問(wèn)題到底在什么情況下可以浮現(xiàn)？
問(wèn)題解答
回答1：一個(gè)關(guān)于css的定位問(wèn)題？-PHP中文網(wǎng)問(wèn)答-一個(gè)關(guān)于css的定位問(wèn)題？-PHP中文網(wǎng)問(wèn)答
圍觀一下哦，學(xué)習(xí)一下。
回答2：因?yàn)閒ixed元素并不總是相對(duì)于視窗進(jìn)行定位的，父元素發(fā)生變換，也就是transfrom屬性發(fā)生改變，如平移或旋轉(zhuǎn)，會(huì)對(duì)固定定位的子元素產(chǎn)生影響。
相關(guān)文章：
1. docker綁定了nginx端口 外部訪問(wèn)不到2. dockerfile - 為什么docker容器啟動(dòng)不了？3. git - webstorm窗口中左側(cè)列表的文件名顏色怎么修改4. android權(quán)限被第三方安全軟件禁止，如何獲取該權(quán)限狀態(tài)5. javascript - 深夜被問(wèn)題困擾求解惑，rn的API之PermissionsAndroidd的問(wèn)題6. javascript - 最近用echarts做統(tǒng)計(jì)圖時(shí)遇到兩個(gè)問(wèn)題！！7. mysql - 我的myeclipse一直連顯示數(shù)據(jù)庫(kù)連接失敗，不知道為什么8. docker images顯示的鏡像過(guò)多，狗眼被亮瞎了，怎么辦？9. tp 6.0 數(shù)據(jù)查詢，求教！10. mysqld無(wú)法關(guān)閉
網(wǎng)公網(wǎng)安備