CODEWITHSUNDEEP
reactjsreact-nativeflexboxpositionabsolute
rafs2459
rafs2459

Reputation: 103

position absolute top:0, bottom: 0, right:0, left:0 and parent paddings

position absolute with all its properties in 0 makes the child element expand in the parent element, and if I put a padding in the parent element without a height the child with the position absolute cover until the of the parent padding, my theory is right or I am forgotting something here?there could be another different case?

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

the child (video) covers the padding

Upvotes: 0

Views: 6276

Answers (4)

Vencie Abendan
Vencie Abendan

Reputation: 1

<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>

            <style>#SCcont24610{width: 100%;padding-top: 56.25%;position: relative;}#SCgFrame24610 {position: absolute;top: 0;left: 0;bottom: 0;right: 0;}</style>
            <div id="SCcont24610">
              <iframe id="SCgFrame24610" frameborder="0" allowfullscreen="" mozallowfullscreen="" webkitallowfullscreen="" hspace="0" vspace="0" scrolling="none" src="https://slotcatalog.com/en/slots/Super-Ace?ajax=1&blck=demo-widget" width="100%" height="100%"></iframe>
            </div>

Upvotes: 0

Lucass Pereira
Lucass Pereira

Reputation: 1

            <style>#SCcont13372{width: 100%;padding-top: 56.25%;position: relative;}#SCgFrame13372 {position: absolute;top: 0;left: 0;bottom: 0;right: 0;}</style>
            <div id="SCcont13372">
              <iframe id="SCgFrame13372" frameborder="0" allowfullscreen="" mozallowfullscreen="" webkitallowfullscreen="" hspace="0" vspace="0" scrolling="none" src="https://slotcatalog.com/pt/slots/Baccarat-Deluxe-PG-Soft?ajax=1&blck=demo-widget" width="100%" height="100%"></iframe>
            </div>

Upvotes: 0

rafs2459
rafs2459

Reputation: 103

Thank you I understand, but you said that it cover padding and border (position absolute related to the edges of the parent element (= ignores parent padding/border).), and I try to cover the border too but it just ignore the padding not the border, what is my mistake here?

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

Upvotes: 1

Ezra Siton
Ezra Siton

Reputation: 7741

An absolutely positioned element is an element whose computed position value is absolute or fixed. The top, right, bottom, and left properties specify offsets from the edges of the element's containing block. https://developer.mozilla.org/en-US/docs/Web/CSS/position

position absolute related to the edges of the parent element (= ignores parent padding/border).

<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; is the way to set overlay:

Example: 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>

Add space by top: 10px; for example (or em % and so on)

<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>

Or add a margin for the absolute element:

<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>

You find more tricks/ideas but these are the basics ideas.

Upvotes: 2

Related Questions