## position: static

when dealing with nested container, the parent div is usually set to be position: relative while child div is position: absolute so that the child element can be positioned to any pos within parent container, if the parent div is set to position: static, child element will ignore parent position.

Note that position: static is CSS default setting, so if we want to use position: absolute, we should always set the parent element to position: relative. ReactNative set the default value back, so no worries.

when use position properties like top and left, we usually set them to 50%, but the result will be like the element’s top left corner is sticked to the center, while the rest of it is not at the center, which is not what we want, we usually use transform property and get it to -50% to center the element.

absolute, relative: 有 z-index。
static: 没有 z-index。

img 和 h1 元素都是 position: static。z-index 对 static 元素不起作用，因此它们都在绝对定位的元素下面。

## position: relative

If you specify position:relative, then you can use top or bottom, and left or right to move the element relative to where it would normally occur in the document.

Let’s move div-1 down 20 pixels, and to the left 40 pixels:

Notice the space where div-1 normally would have been if we had not moved it: now it is an empty space. The next element (div-after) did not move when we moved div-1. That’s because div-1 still occupies that original space in the document, even though we have moved it. 效果参考：

• references from Absolute, Relative, Fixed Positioning: How Do They Differ?
There are two other things that happen when you set position: relative; on an element that you should be aware of. One is that it introduces the ability to use z-index on that element, which doesn’t really work with statically positioned elements. Even if you don’t set a z-index value, this element will now appear on top of any other statically positioned element. You can’t fight it by setting a higher z-index value on a statically positioned element. The other thing that happens is it limits the scope of absolutely positioned child elements. Any element that is a child of the relatively positioned element can be absolutely positioned within that block.