最近做一個(gè)公司的項(xiàng)目，其中有個(gè)需求，類(lèi)似于Android中的下拉菜單，這個(gè)就涉及到了圖層的問(wèn)題，ReactNative中，與之相關(guān)的是positon，下面分幾種情況討論
一、大前提：父View不是position定位
1.上面的view和下面的view都是position定位，如下圖:
可見(jiàn)，都用了position后，在定位重復(fù)時(shí)，下面的view會(huì)覆蓋上面的view（小神經(jīng)被我的大學(xué)在山東覆蓋），這說(shuō)明，下面的view圖層更高。
2.上面的view不是，下面的是絕對(duì)定位。把小神經(jīng)的Position:absolute去掉，自然top 和left也去掉。效果圖如下：
可以看到，“我的大學(xué)在山東” 的絕對(duì)定位是以其直接父view 為參考點(diǎn)定位的，而不是整個(gè)的窗口。如果去掉top 和left，如下圖：
可以看到就好像沒(méi)有加Position:absolute 定位一樣，但此時(shí)圖層是降了的，稍后再講。
3.上面的view是絕對(duì)定位，下面的不是。在“我的大學(xué)在山東” 下面加上一個(gè)view，如下圖：
可以看到，“我愛(ài)你” 這個(gè)元素，表現(xiàn)的好像“我的大學(xué)在山東” 不存在一樣，覆蓋了它（加上背景色更顯著）. 此時(shí)，加上top:0 和left:20定位
看來(lái)，這個(gè)不影響后面的元素。
在這個(gè)大前提下，我們來(lái)看看，justifyContent 和alignItems 和alignSelf 的影響。
在這里，我的"閆雅"用了alignSelf:'flex-end',這個(gè)導(dǎo)致，效果如下：
也就是說(shuō)，“閆雅”這個(gè)不是占據(jù)一整行了(沒(méi)有加width屬性)，加上背景色，只會(huì)顯示包容“閆雅”二字這么個(gè)長(zhǎng)度的著色，然后我給"閆雅"加上width：width屬性，并設(shè)置背景色。布局和樣式如下：
效果如下：
可以看到，雖然"我的大學(xué)在山東" 用了絕對(duì)定位，但因?yàn)槠湓?閆雅"的 布局下面，所以圖層更高。
另外設(shè)置了Position屬性的view alignSelf 不起作用，alignItems 和justifyContent對(duì)其子元素起作用。其父view 的alignItems 和justifyContent 對(duì)其不起作用。
總結(jié)：在ReactNative 中，當(dāng)view設(shè)置了position屬性后，圖層變低，但是比其前面的圖層高。子view的圖層高于父view的圖層。
如果要實(shí)現(xiàn)彈出菜單覆蓋當(dāng)前頁(yè)面部分內(nèi)容，可以用以上知識(shí)做，也可以把菜單的margin 屬性設(shè)置為負(fù)的，滿足條件顯示即可。
