абсолютная верхняя позиция: 0, нижняя: 0, правая: 0, левая: 0 и родительские отступы - PullRequest
Новая
       32

абсолютная верхняя позиция: 0, нижняя: 0, правая: 0, левая: 0 и родительские отступы

0 голосов
/ 19 апреля 2020

абсолютное положение со всеми его свойствами в 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,
  },
});

ребенок (видео) покрывает отступ

Ответы [ 2 ]

1 голос
/ 20 апреля 2020

Абсолютно позиционированный элемент - это элемент, вычисленное значение позиции которого является абсолютным или фиксированным. Свойства top , right , 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; - способ установки оверлея:

Пример: 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>

Вы найдете больше трюков / идей, но это основные идеи.

0 голосов
/ 21 апреля 2020

Спасибо, я понимаю, но вы сказали, что он покрывает отступы и границу (абсолютное положение относится к краям родительского элемента (= игнорирует родительский отступ / границу).), И я тоже пытаюсь покрыть границу, но это просто игнорировать отступы, а не границы, в чем моя ошибка здесь? 

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