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

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

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

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

問(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)生影響。

標(biāo)簽: CSS
相關(guān)文章:
主站蜘蛛池模板: 光泽县| 建宁县| 葫芦岛市| 新竹市| 灵宝市| 惠水县| 博罗县| 孟村| 镶黄旗| 瓦房店市| 特克斯县| 隆昌县| 广水市| 大宁县| 江北区| 富民县| 泉州市| 金塔县| 南平市| 东宁县| 古丈县| 乌审旗| 湛江市| 洛浦县| 台州市| 清涧县| 长治市| 庐江县| 平果县| 博兴县| 揭阳市| 开封县| 大足县| 龙陵县| 佳木斯市| 泌阳县| 辉县市| 民乐县| 昭通市| 富民县| 淮南市|