I am trying to avoid using position absolute for my mobile-first, responsive website./ I am having a tough time getting the h1 and p tag in front of the image. With position absolute comes more troubles down the road, so I would like to avoid that. Also any advice for dealing with those svg lines or should I remove them? Here's my code:

.climate {
    padding: 2em 1em 5rem;
}

.reverse {
    font-size: 2.5rem;
    font-weight: var(--fw-normal);
    color: var(--clr-light);
    z-index: 10;
}

.disaster-graphic {
    background-color: var(--clr-background);
} 


.graphic-image {
    z-index: 1;
    margin: -150px 0 0 205px;
    padding: 0;
}

.greenroof {
    max-width: 600px;
    
}

<section >
       
            <h2 >Reverse the climate disaster</h2>
            <p >Learn what it takes to bring your business to the next level.</p>
       
        <div >
                <img src="/images/greene 1.png" >
            </div>

CodePudding user response：

z-index can be tricky. Unfortunately, when working with z-index you have to at least position the element of which you are trying to move along the z-axis. Some helpful reading about z-index:

4 reasons your z-index isn't working (and how to fix it)

To solve your problem, you can simply add position: relative to your .graphic-image. Furthermore, change it's z-index from 1 to -1. Lastly, you do not need to have a z-index: 10 on .reverse. On elements where z-index is not specified, it is set to auto (0). So in this case -1 < 0.

I used a placeholder image and also changed the color of your text just so you can see it in front of the image.

Regarding your "SVG lines", you'll have to post some more code to get further assistance with that issue.

body{
  color: goldenrod; /* to be removed, just so you can see the text in front of image */
}
.climate {
  padding: 2em 1em 5rem;
}

.reverse {
  font-size: 2.5rem;
  font-weight: var(--fw-normal);
  color: var(--clr-light);
  /*remove z-index: 10 */
}

.disaster-graphic {
  background-color: var(--clr-background);
}

.graphic-image {
  z-index: -1; /*change z-index to -1*/
  margin: -150px 0 0 205px;
  padding: 0;
  position: relative; /*add position*/
}

.greenroof {
  max-width: 600px;
}

<section >

  <h2 >Reverse the climate disaster</h2>
  <p >Learn what it takes to bring your business to the next level.</p>

  <div >
<!-- placeholder image -->
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/800px-Image_created_with_a_mobile_phone.png" >
  </div>

CodePudding user response：

z-index only sets the z-order of a positioned element or a flex item. That is to say z-index does nothing unless either you specify the position of the element or the element is a flex item. In your case neither of those are true so z-index does nothing.

The easiest solution is to simply add position: relative to .reverse and .orange.

I've quickly put together a working codepen for context.

Regarding the svg lines, there are many ways you could deal with them but it depends what your goal is. I am going to assume you always want them "attached" to the orange box like in the image you've shared but don't want their existence to impact the layout of the rest of the elements.

That being the case, I would suggest using position: absolute on the svg with the svg element being a direct child of .orange (which you will have now added position:relative to solve your z-index issue). This will "attach" the svg to the orange box so that wherever the orange box goes, the green lines go too. It would be helpful to see more of your code so that part of your question could be answered in more detail.

Personally I would have made the orange box an element and placed the <p> tag inside it rather than styling the <p> to look like text inside and orange box. You may have had a reason for doing it your way though. The codepen I added above contains my solution for the svg lines by the way.