How can I make links on top of background images clickable? - html

Question

Forgive me if this has been asked before, I have tried some solutions that have been suggested and none has worked for me just yet.
I have a background image and I want to add links in a div, the links are currently unclickable and I don't know where I am going wrong.
Here's my code so far:
import '../../stylesheets/new_style.scss';
import React, {Fragment, useReducer, useState} from 'react';
import {Button, Col, Row, Modal} from 'react-bootstrap';
const NewGreeting = props => {
return (
<div className="full-page">
<Modal.Dialog>
<Modal.Body>
<p> Modal Content Here </p>
</Modal.Body>
</Modal.Dialog>
<div className='trial text-center'>
test
</div>
</div>
);
};
export default NewGreeting;
And here is my css code:
.full-page {
background-image: url("./hello.png");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.trial{
display: block;
color: #474747;
font-size: 2.1em;
margin-top: 50vh;
}

Answer 1

(Converting my comment to an answer:)
The problem is the <Modal.Dialog> element has special behaviour that makes it "take over" the page and make the rest of the page non-interactive - and your <div> with links in it is located outside that <Modal> dialog, so just move your links into the <Modal.Body> and they'll be made interactive again.
Like so:
import '../../stylesheets/new_style.scss';
import React, {Fragment, useReducer, useState} from 'react';
import {Button, Col, Row, Modal} from 'react-bootstrap';
const NewGreeting = props => {
return (
<div className="full-page">
<Modal.Dialog>
<Modal.Body>
<p> Modal Content Here </p>
<div className='trial text-center'>
test
</div>
</Modal.Body>
</Modal.Dialog>
</div>
);
};
export default NewGreeting;

Answer 2

Try this:
.trial{
display: block;
color: #474747;
font-size: 2.1em;
margin-top: 50vh;
z-index: 999;
}
z-index will help you.
https://www.w3schools.com/cssref/pr_pos_z-index.asp