My question can be particular problem in this case for which i am sorry but i have read "http://book.mixu.net/css/5-tricks.html#css-layout-tricks-and-techniques-used-for-positioning" this whole article and other tutorials on layout and didn't find approach to my problem. I have a collection of with image inside and text i use (onmouseenter onmouse) leave to show a p tag with text that is appended to the bottom of the card.

Now when i open the dropdown i want it to be displayed over the other card i read about using positions relative for the parent and absolute for the child and use margins but when i try to customize the Cards they end up all on top of each other and only one is shown.

I cannot append the image to the question because i don't have 10 reputation i can post a link "https://i.ibb.co/1s5Mf85/Screenshot-from-2019-05-04-07-35-585.png".

enter image description here

This is the html structure i use.

render() {
        const { id, brand, model, imgUrl } = this.props;
        const { shouldShowDescription } = this.state;

        return (

            <Card tabIndex="1" className={shouldShowDescription ? style.cardOn : style.cardOff} onMouseEnter={this.toggleDescriptionVisibility} onMouseLeave={this.toggleDescriptionVisibility}>
                <CardImg variant="top" src={imgUrl} />
                <CardBody className={style.cardText}>
                    <CardTitle>{brand}{model}</CardTitle>
                    <div className={shouldShowDescription ? style.fadeIn : style.fadeOut}>
                        <p>
                            * bar<br />
                            * foo <br />
                            * foo <br />
                            * foo <br />
                            * foo <br />
                        </p>
                    </div>
                </CardBody>
            </Card>
        );
    }

and this is the styles i have for the cards.

.cardOff {
    border: 0;
    width: 13rem;
    display: inline-block;
    opacity: 0.99;
}

.cardOn {
    border: 3px solid #f5f5f5;
    width: 13rem;
    display: inline-block;
    opacity: 0.99;
}

If someone can show me how this can be achieved or to give me a resource to learn from. Thank you in advance.

1 Answers

0
UpsylonD On

You could use :focus and z-index to pass your element over the others.

enter link description here

.element:focus{

z-index:100; }