Update docs related to position to account for static (facebook#4235)

* Update docs related to position to account for static

* fix typo

* fix tsx lint

* fix format

* update RN version for linting to 0.74.1

* requested changes

* address nit

Author: joevilches

docs/flexbox.md

@@ -2575,18 +2575,20 @@ export default WidthHeightBasics;
 </TabItem>
 </Tabs>
 
-## Absolute & Relative Layout
+## Position
 
-The `position` type of an element defines how it is positioned within its parent.
+The `position` type of an element defines how it is positioned relative to either itself, its parent, or its [containing block](./flexbox.md#the-containing-block).
 
 - `relative` (**default value**) By default, an element is positioned relatively. This means an element is positioned according to the normal flow of the layout, and then offset relative to that position based on the values of `top`, `right`, `bottom`, and `left`. The offset does not affect the position of any sibling or parent elements.
 
-- `absolute` When positioned absolutely, an element doesn't take part in the normal layout flow. It is instead laid out independent of its siblings. The position is determined based on the `top`, `right`, `bottom`, and `left` values.
+- `absolute` When positioned absolutely, an element doesn't take part in the normal layout flow. It is instead laid out independent of its siblings. The position is determined based on the `top`, `right`, `bottom`, and `left` values. These values will posistion the element relative to its containing block.
+
+- `static` When positioned statically, an element is positioned according to the normal flow of layout, and will ignore the `top`, `right`, `bottom`, and `left` values. This `position` will also cause the element to not form a containing block for absolute descendants, unless some other superceding style prop is present (e.g. `transform`). This allows `absolute` elements to be positioned to something that is not their parent. Note that **`static` is only available on the New Architecture**.
 
 <Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
 <TabItem value="javascript">
 
-```SnackPlayer name=Absolute%20%26%20Relative%20Layout&ext=js
+```SnackPlayer name=Position&ext=js
 import React, {useState} from 'react';
 import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
 
@@ -2597,7 +2599,7 @@ const PositionLayout = () => {
     <PreviewLayout
       label="position"
       selectedValue={position}
-      values={['relative', 'absolute']}
+      values={['relative', 'absolute', 'static']}
       setSelectedValue={setPosition}>
       <View
         style={[
@@ -2716,19 +2718,21 @@ export default PositionLayout;
 </TabItem>
 <TabItem value="typescript">
 
-```SnackPlayer name=Absolute%20%26%20Relative%20Layout&ext=tsx
+```SnackPlayer name=Position&ext=tsx
 import React, {useState} from 'react';
 import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
 import type {PropsWithChildren} from 'react';
 
 const PositionLayout = () => {
-  const [position, setPosition] = useState<'relative' | 'absolute'>('relative');
+  const [position, setPosition] = useState<'relative' | 'absolute' | 'static'>(
+    'relative',
+  );
 
   return (
     <PreviewLayout
       label="position"
       selectedValue={position}
-      values={['relative', 'absolute']}
+      values={['relative', 'absolute', 'static']}
       setSelectedValue={setPosition}>
       <View
         style={[
@@ -2769,9 +2773,9 @@ const PositionLayout = () => {
 
 type PreviewLayoutProps = PropsWithChildren<{
   label: string;
-  values: Array<'relative' | 'absolute'>;
+  values: Array<'relative' | 'absolute' | 'static'>;
   selectedValue: string;
-  setSelectedValue: (value: 'relative' | 'absolute') => void;
+  setSelectedValue: (value: 'relative' | 'absolute' | 'static') => void;
 }>;
 
 const PreviewLayout = ({
@@ -2854,6 +2858,23 @@ export default PositionLayout;
 </TabItem>
 </Tabs>
 
+## The Containing Block
+
+The containing block of an element is an ancestor element which controls its position and size.
+The way containing blocks work in React Native is very similar to [how they work on the web](https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block), with some simplifications due to the lack of some web features.
+
+The `top`, `right`, `bottom`, and `left` values of an absolutely positioned element will be
+relative to its containing block.
+
+Percentage lengths (e.g.: `width: '50%'` or `padding: '10%'`) applied to absolutely positioned elements will be calculated relatively to the size of its containing block. For example, if the containing block is 100 points wide, then `width: 50%` on an absolutely positioned element will cause it to be 50 points wide.
+
+The following list will help you determine the containing block of any given element:
+
+- If that element has a `position` type of `relative` or `static`, then its containing block is its parent.
+- If that element has a `position` type of `absolute`, then its containing block is the nearest ancestor in which one of the following is true:
+  - It has a `position` type other than `static`
+  - It has a `transform`
+
 ## Going Deeper
 
 Check out the interactive [yoga playground](https://www.yogalayout.dev/playground) that you can use to get a better understanding of flexbox.

docs/layout-props.md

@@ -923,17 +923,20 @@ Setting `paddingVertical` is like setting both of `paddingTop` and `paddingBotto
 
 ### `position`
 
-`position` in React Native is similar to regular CSS, but everything is set to `relative` by default, so `absolute` positioning is always relative to the parent.
+`position` in React Native is similar to [regular CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/position), but everything is set to `relative` by default.
 
-If you want to position a child using specific numbers of logical pixels relative to its parent, set the child to have `absolute` position.
+`relative` will position an element according to the normal flow of the layout. Insets (`top`, `bottom`, `left`, `right`) will offset relative to this layout.
 
-If you want to position a child relative to something that is not its parent, don't use styles for that. Use the component tree.
+`absolute` takes the element out of the normal flow of the layout. Insets will offset relative to its [containing block](./flexbox.md#the-containing-block).
 
-See https://github.com/facebook/yoga for more details on how `position` differs between React Native and CSS.
+`static` will position an element according to the normal flow of the layout. Insets will have no effect.
+`static` elements do not form a containing block for absolute descendants.
 
-| Type                         | Required |
-| ---------------------------- | -------- |
-| enum('absolute', 'relative') | No       |
+For more information, see the [Layout with Flexbox docs](./flexbox.md#position). Also, [the Yoga documentation](https://www.yogalayout.dev/docs/styling/position) has more details on how `position` differs between React Native and CSS.
+
+| Type                                   | Required |
+| -------------------------------------- | -------- |
+| enum('absolute', 'relative', 'static') | No       |
 
 ---
 

scripts/lint-examples/package.json

@@ -11,16 +11,16 @@
     "@babel/core": "^7.25.2",
     "@babel/preset-env": "^7.25.4",
     "@babel/runtime": "^7.25.6",
-    "@react-native/babel-preset": "^0.75.3",
+    "@react-native/babel-preset": "^0.76.0-rc.2",
     "@react-native-community/slider": "^4.5.3",
-    "@react-native/eslint-config": "^0.75.3",
-    "@react-native/typescript-config": "^0.75.3",
+    "@react-native/eslint-config": "^0.76.0-rc.2",
+    "@react-native/typescript-config": "^0.76.0-rc.2",
     "@types/react": "^18.2.79",
     "eslint": "^8.57.1",
     "glob-promise": "^4.2.2",
     "prettier": "2.8.8",
-    "react": "18.2.0",
-    "react-native": "^0.75.3",
+    "react": "18.3.1",
+    "react-native": "^0.76.0-rc.2",
     "react-native-safe-area-context": "^4.11.0",
     "typescript": "5.5.4"
   }