Перечисление Position

Перечисление Position задает ключ position в стиле View. При 'absolute' элемент выходит из потока и позиционируется относительно родителя через ключи top, left, right и bottom.

Синтаксис

position: 'absolute'

Значения

Значение	Описание
`'relative'`	Элемент остается в потоке; смещение через `top` и `left` не выбивает соседей.
`'absolute'`	Элемент вынут из потока и привязан к краям родителя.
`'static'`	Как `'relative'`; смещение через `top` и `left` не применяется.

Значение по умолчанию: 'relative'.

Пример

Давайте положим подпись поверх контейнера:

import { View, Text, StyleSheet } from 'react-native';

export default function App() {
	return (
		<View style={styles.root}>
			<Text>abcde</Text>
			<Text style={styles.badge}>12345</Text>
		</View>
	);
}

const styles = StyleSheet.create({
	root: {
		height: 80,
	},
	badge: {
		position: 'absolute',
		top: 4,
		right: 4,
	},
});

На экране второй текст окажется в правом верхнем углу, не сдвигая первый.

Пример

Давайте растянем слой на весь родитель через абсолютное положение:

import { View, Text, StyleSheet } from 'react-native';

export default function App() {
	return (
		<View style={styles.root}>
			<View style={styles.fill}>
				<Text>abcde</Text>
			</View>
		</View>
	);
}

const styles = StyleSheet.create({
	root: {
		height: 100,
	},
	fill: {
		position: 'absolute',
		left: 0,
		right: 0,
		top: 0,
		bottom: 0,
	},
});

На экране внутренний блок займет всю область родителя.

Смотрите также

компонент View,
который задает размер и отступы через style
класс StyleSheet,
со значением absoluteFill для полного перекрытия
перечисление Overflow,
которое обрезает содержимое за границей
перечисление Display,
которое убирает элемент из раскладки