Question 212020 in CSS Question posted in
Some basic documentation can be found here.

Css – How to place one element on top of another using flexbox?

I’m trying to place text on top of an image. I want to achieve this using only Flexbox, without using the position property. Is it possible with Flexbox?

const Component = () => {
  return (
    <section>
      <img src={mountains} />
      <p className="paragraph">Hello everyone</p>
    </section>
  );
};

export default Component;
Tags:

3

Answers


  1. 0

    Either u use a position property, or make the image as a div with background image

        <div style={{backgroundImage: 'url("mountain.jpg")'}}> //Image link here
    <p className="paragraph">Hello everyone</p>
    </div>
    Login or Signup to reply.
  2. 0

    You can make use of absolute position within the flex container.
    Thanks 🙂

    Login or Signup to reply.
  3. 0

    In css ia called "Hero image", you can do like this:

        <div style={{backgroundImage: 'url("image.jpg")',  backgroundPosition: "center", backgroundRepeat: "no-repeat", backgroundCover: "cover"}}>
        <p className="paragraph">Hello everyone</p>
    </div>

    You can work with display flex inside of this div to change de "p" tag position.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search