CODEWITHSUNDEEP
javascriptreactjs
louis Schneider
louis Schneider

Reputation: 121

How to overlay a component on top of another

I want to implement a floating action button and I want to overlay it on other pieces of a component but in anyways it goes under the other components, even when I try to implement it in the parent component.

I want to implement it from material UI Floating action button

Here is what I've tried before:

const fabstyle = {
        margin: 0,
        top: 'auto',
        right: 20,
        bottom: 20,
        color:'green',
        left: 'auto',
        position: 'fixed',
};
return (
    <div >
        <Fab style={fabstyle}></Fab>
    </div>
)

Upvotes: 2

Views: 12196

Answers (3)

user14949429
user14949429

Reputation:

You can use the z-index property in the CSS class

Usage:

.myBoxOnTop {
    z-index: 3;
}

.myBoxOnBottom {
    z-index: 2;
}

Upvotes: 2

Ghazi 360
Ghazi 360

Reputation: 108

Make your parent component Position Relative & child component Position Absolute. It will enable you to position your child element the way you want.

#Parent {
position: relative;
}

#Child {
position: absolute;
//Set the top,left,bottom & right properties the way you want to style your component
}

Upvotes: 3

GBra 4.669
GBra 4.669

Reputation: 1689

there are multiple ways to achieve this one is with grid, the other which is simpler is making your parent component relative (position: relative) and the children component absolute (position: absolute).

Then you can position the children element with the values: *top, left, bottom and right

.parent {
    position: relative;
}

.children {
   position: absolute;
   top: 0;
   left: 0;
}

In the example above, the children will be rendered in the top left corner of the parent component

Upvotes: 7

Related Questions