CSS position problems (need help)

Does anyone know how I can have the 4th circle stay inside the pink About Me section? I want half to be hidden behind the wave line and for half the circle to be showing. I have tried putting the welcome-section position to absolute but that makes everything a mess. I don’t know what to do

How is this for a work around solution. Not sure if its the best way.

.circle-4{
height: 100px;
width: 100px;
background-color:#FFB6C1;
border-radius: 5000px;
position: absolute;
opacity: 0.3;
margin-top: -100px;
margin-left: 300px;
}

Yeah not what I was going for, I want that circle to be cut off by the wave, similar to how I was able to have the bottom left circle cut off. But for some reason I can’t get this to happen

I would work with z-index

1 Like

https://deft-licorice-3f2008.netlify.app/

The circle on the top left (circle-4) is getting cut off too early. How can I get this circle on top of the pink wave without having it overlap into the welcome-section?

if this is what you are looking for, then you need to give “circle-4” a higher “z-index” value
image

I am looking for that but for the circle to be pushed up higher than that. But when it’s pushed up higher than that I want it to be cut off by the waved line. Instead, when I give circle-4 a higher z-index it ends up being on top of the dark navy blue welcome-ection when I want it to be under it

I think what I want to achieve may be impossible. The welcome-section must have the lowest z-index, the wave has to be on top of that so the z-index will be higher, but if you make the z-index of circle-4 higher than the wave it will sit on top of the wave but it will also overlap the welcome-section. The only way I could think of making this work is by having the wave and circle-4 share the same z-index but it doesn’t work like that

^^ This is what I get if I try giving the wave and circle the same z-index.

  • maybe dont push it any higher up then :grin: unless that’s utmost necessary in that case would you prefer it being more on right of its current position on screen, then i suppose it solves your problem somewhat…

Yea looks like there’s no way around it. I wanted it to be cut off by the wave but I will just bring it down. Thanks for your help :slight_smile:

you can, but for that you need to think for a “new layer” for just “wave” bit, that should do that trick, currently i assume its just padding of some sort?

happy coding :slight_smile:

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.