绝对位置：顶部0，底部：0，右侧：0，左侧：0和父填充物

Question

position absolute及其所有属性都为0会使子元素在父元素中扩展，并且如果我在不带高度的父元素中放置填充，则将具有绝对覆盖位置的子元素放置到父填充的，我的理论是是的，还是我在这里放弃了一些东西？可能还有另外一种情况？

import React from 'react';
import {View, StyleSheet} from 'react-native';
import Video from 'react-native-video';

export default function Reproductor(props) {
  return (
    <View style={styles.container}>
      <View style={styles.videoContainer}>
        <Video
          source={{
            uri:
              'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
          }}
          resizeMode="cover"
          style={styles.video}
        />
      </View>
    </View>
  );
}
const styles = StyleSheet.create({
  container: {
    height: 250,

    justifyContent: 'center',
    alignItems: 'center',
  },
  videoContainer: {
    width: '90%',
    paddingTop: '56.25%',

    borderRadius: 20,
    overflow: 'hidden',
    borderWidth: 3,
    backgroundColor: 'black',
  },
  video: {
    position: 'absolute',
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
  },
});

孩子（视频）覆盖填充物

Answer 1

top，right，bottom和left属性指定相对于元素包含块的edges。https://developer.mozilla.org/en-US/docs/Web/CSS/position

位置absolute与父元素的边缘有关（=忽略父填充/边框）。

<div style="padding: 50px; background: red; color: white; position:relative;">
  <div style="border: 1px solid white; height: 50px;"></div>
  <div style="position: absolute; background: blue; top:0; left:0; color: white;">child</div>
</div>

例如，以top: 10px;（或em %，依此类推）添加空格]

<div style="padding: 50px; background: red; color: white; position:relative;">
  <div style="border: 1px solid white;">Parent</div>
  <div style="position: absolute; background: blue; top:10px; left:10px; color: white;">child</div>
</div>

或为绝对元素添加边距：

<div style="padding: 50px; background: red; color: white; position:relative;">
  <div style="border: 1px solid white;">Parent</div>
  <div style="position: absolute; background: blue; top:0px; left:0px; color: white;margin: 10px;">child</div>
</div>

这是基本概念。