绝对位置 top:0, bottom: 0, right:0, left:0 和父填充答案

【问题标题】：position absolute top:0, bottom: 0, right:0, left:0 and parent paddings绝对位置 top:0, bottom: 0, right:0, left:0 和父填充
【发布时间】：2020-08-01 11:25:33
【问题描述】：

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,
  },
});

孩子（视频）覆盖了填充

【问题讨论】：

绝对位置及其所有属性为 0 类似于 100% 宽度和 100% 高度。如果您希望styles.video 跟随styles.videoContainer，请确保高度和宽度相同

标签： reactjs react-native flexbox position absolute

【解决方案1】：

绝对定位元素是一个元素，其计算位置值是绝对的或固定的。顶部，右侧， bottom 和 left 属性指定距元素包含块的边缘的偏移量。 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: 0; right: 0; bottom: 0; left: 0;是设置overlay的方式：

示例： https://www.w3schools.com/howto/howto_css_overlay.asp

<div style="padding: 50px; background: red; color: white; position:relative;">
  <div style="border: 1px solid white;">div</div>
  <div style="position: absolute; background: rgba(0, 0, 0, 0.5); top:0px; left:0px; right: 0; bottom: 0; color: white;">overlay</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>

或者为绝对元素添加margin：

<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;">margin: 10px around</div>
</div>

您会发现更多技巧/想法，但这些是基本想法。

【讨论】：

【解决方案2】：

谢谢，我明白了，但你说它涵盖了填充和边框（与父元素的边缘相关的绝对位置（= 忽略父填充/边框）。），我也尝试覆盖边框，但它只是忽略填充而不是边框，我的错误是什么？

export default function MainScreen(props) {
  return (

      <View style={style.container}>
        <View style={style.element} />
      </View>

  );
}
const style = StyleSheet.create({
  container: {
    borderWidth: 3,
    padding: 40,
    alignSelf: 'center',
    width: 200,
    height: 200,
    backgroundColor: 'grey',
  },
  element: {
    position: 'absolute',
    top: 0,
    bottom: 0,
    left: 0,
    right: 0,
    width: 100,
    height: 100,
    backgroundColor: 'purple',
  },
});

【讨论】：