Within my React Native application, I have implemented the following code:
<View
style={{
width: 50,
height: 50,
borderWidth: 1,
}}
>
<View style={{
width: 5,
height: 5,
backgroundColor: 'red',
top: 10,
left: 10
}}></View>
</View>
Upon execution, the outcome is as follows:
https://i.sstatic.net/GxfUH.png
However, swapping top with bottom leads to a different result:
https://i.sstatic.net/DGTDn.png
When changing the child element's styling to position: absolute, the behavior aligns with expectations:
https://i.sstatic.net/GdTxo.png
The Questions Arising Are:
1) What causes the red dot to appear above the black square in the second image?
2) Given that the red dot is the sole child of the black square, how does adding position: absolute make a difference?
3) Why does top function as anticipated in all scenarios, while bottom exhibits expected behavior only in the third case?