久久r热视频,国产午夜精品一区二区三区视频,亚洲精品自拍偷拍,欧美日韩精品二区

您的位置:首頁技術(shù)文章
文章詳情頁

一個關(guān)于css的定位問題?

瀏覽:162日期:2023-02-03 16:41:19

問題描述

最近在用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)生影響。

標(biāo)簽: CSS
相關(guān)文章:
主站蜘蛛池模板: 乡宁县| 日喀则市| 绵阳市| 皋兰县| 运城市| 渝北区| 曲水县| 东兰县| 丹巴县| 南靖县| 柘城县| 普洱| 安塞县| 刚察县| 兴化市| 海原县| 广丰县| 天水市| 石首市| 沙雅县| 新干县| 德格县| 巴南区| 千阳县| 邯郸县| 汾阳市| 石台县| 登封市| 年辖:市辖区| 金乡县| 望谟县| 从江县| 布拖县| 咸宁市| 桦南县| 乌鲁木齐市| 丹凤县| 闽清县| 隆子县| 和林格尔县| 巴马|