Overlapping elements from one section to another

Hi there.

I am getting desperate here! I really hope someone can help me.

I am trying to get the two elements: #block-11e99a836afa8c0fa200 and #block-6957641b2f5a849b7663 to overlap from section: section[data-section-id="65b7770d51e0d15cf2b36c90"] to section: section[data-section-id="65b13f75b732b90fb6f3c400"]

I have tried different css, but nothing seems to work. I really hope someone can help me.

Thank you so much!

www.nannasalver.com
password: Eigil2024!

What CSS have you tried?

Generally you can create an overlap with a negative margin on a block if you have it in the second section overlapping with the first.

4 hours ago, Ziggy said:

What CSS have you tried?

Generally you can create an overlap with a negative margin on a block if you have it in the second section overlapping with the first.

Thank you so much for getting back to me this fast!
I have tried different CSS that I found in other posts, but none of them works.
Right now I used this (which doesn't work either): 

[data-section-id="65b7770d51e0d15cf2b36c90"] {
    position: relative;
    z-index: 2; 
 

#block-6957641b2f5a849b7663 {
    position: absolute;
    top: 400px;
    left: 0;
    z-index: 3;
}

#block-11e99a836afa8c0fa200 {
    position: absolute;
    top: 400px;
    left: 50px;
    z-index: 3;
}

[data-section-id="65b13f75b732b90fb6f3c400"] {
    position: relative;
    z-index: 1;
}

Remove blocks CSS, and try this for the first one: 

[data-section-id="65b7770d51e0d15cf2b36c90"] {
    position: relative;
    z-index: 2; 
    overflow: visible;
    margin-bottom: -100px;
}

1 hour ago, nick_sh said:

Remove blocks CSS, and try this for the first one: 

[data-section-id="65b7770d51e0d15cf2b36c90"] {
    position: relative;
    z-index: 2; 
    overflow: visible;
    margin-bottom: -100px;
}

 

That doesn't work either. But thank you!!

1 hour ago, nick_sh said:

Remove blocks CSS, and try this for the first one: 

[data-section-id="65b7770d51e0d15cf2b36c90"] {
    position: relative;
    z-index: 2; 
    overflow: visible;
    margin-bottom: -100px;
}

 

[data-section-id="65b7770d51e0d15cf2b36c90"] {
    position: relative;
    z-index: 2; 
    overflow: visible !important;
    margin-bottom: -100px;
}


#block-6957641b2f5a849b7663, 
#block-11e99a836afa8c0fa200 {
	transform: translatey(100px)
}

[data-section-id="65b13f75b732b90fb6f3c400"] {
    position: relative;
    z-index: 1;
}

Apparently it needed !important in 1st one, moving blocks a bit down and z-index on the second one 😂

2 minutes ago, nick_sh said:

[data-section-id="65b7770d51e0d15cf2b36c90"] {
    position: relative;
    z-index: 2; 
    overflow: visible !important;
    margin-bottom: -100px;
}


#block-6957641b2f5a849b7663, 
#block-11e99a836afa8c0fa200 {
	transform: translatey(100px)
}

[data-section-id="65b13f75b732b90fb6f3c400"] {
    position: relative;
    z-index: 1;
}

Apparently it needed !important in 1st one, moving blocks a bit down and z-index on the second one 😂

It looks like this when I try this css  🫣 Did you make it work?

Yeah, it works. I don't see the z-index change on your second section

12 hours ago, nick_sh said:

Yeah, it works. I don't see the z-index change on your second section

I just copied the css you wrote and dropped it in. But it doesn't look like that on my screen. How come?

You won't have z-index issues if you place the block in the second section and use a negative top margin...

3 minutes ago, Ziggy said:

You won't have z-index issues if you place the block in the second section and use a negative top margin...

Would you help me with a css for this? Thank you so much!

10 minutes ago, Ziggy said:

You won't have z-index issues if you place the block in the second section and use a negative top margin...

I tried this, but that doesn't work either 😞
 

div#block-725ef58700de9f5d2edc {
    position: relative;
    margin-top: -170px;
  overflow: visible !important;
}

div#block-8cd0d00c4889b2c723b3 {
    position: relative;
    margin-top: -170px;
  overflow: visible !important;
}
 

9 minutes ago, Floe said:

Would you help me with a css for this? Thank you so much!

OH!!!! I figured it out. THANK YOU SO MUCH!!! It worked!!!!

Just now, Floe said:

OH!!!! I figured it out. THANK YOU SO MUCH!!! It worked!!!!

Well done!

Hi, I have a small problem that I would like to solve linked to the same issue. I have two sections on my landing page that I want to have rounded corners with a overlap. But I only get the rounding when if I don't use #. What am I doing wrong🙈

The code I´ve come to this far:

/* section round corner */

[data-section-id="66c34caca7733b73e6b25a77"] {
    position: relative;
    z-index: 2; 
    overflow: visible;
    margin-bottom: -100px;
  	margin-top: -100px;
}

[data-section-id="66c341699fe79478bcedcc41"] {
    position: relative;
    z-index: 2; 
    overflow: visible;
    margin-bottom: -100px;
  	margin-top: -100px;
}

.page-section {
  background: #fbfbfb 0% 0% no-repeat padding-box !important;
  border-radius: 100px 0px 100px 0px;
  overflow: hidden;
}

23 minutes ago, Vebbi said:

Hi, I have a small problem that I would like to solve linked to the same issue. I have two sections on my landing page that I want to have rounded corners with a overlap. But I only get the rounding when if I don't use #. What am I doing wrong🙈

I'm not sure I understand fully, can you share your website URL and this page?

Try this variation of your code:

/* section round corner */

[data-section-id="66c34caca7733b73e6b25a77"] {
    position: relative;
    z-index: 2; 
    overflow: visible;
    margin-bottom: -100px;
  	margin-top: -100px;
}

[data-section-id="66c341699fe79478bcedcc41"] {
    position: relative;
    z-index: 2; 
    overflow: visible;
    margin-bottom: -100px;
  	margin-top: -100px;
}

section[data-section-id="66c88ac7aa2c9f5cff5ac6c3"] .page-section, section[data-section-id="66c88ac7aa2c9f5cff5ac6c6"]  .page-section {
  background: #fbfbfb 0% 0% no-repeat padding-box !important;
  border-radius: 100px 0px 100px 0px;
  overflow: hidden;
}

It didn't seem to work. I tryed to change the id's to but

[data-section-id="66c34caca7733b73e6b25a77"] {
    position: relative;
    z-index: 2; 
    overflow: visible;
    margin-bottom: -100px;
  	margin-top: -100px;
}

[data-section-id="66c341699fe79478bcedcc41"] {
    position: relative;
    z-index: 2; 
    overflow: visible;
    margin-bottom: -100px;
  	margin-top: -100px;
}

section[data-section-id="66c341699fe79478bcedcc41"] .page-section, section[data-section-id="66c34caca7733b73e6b25a77"]  .page-section {
  background: #fbfbfb 0% 0% no-repeat padding-box !important;
  border-radius: 100px 0px 100px 0px;
  overflow: hidden;
}

Might need this tweak:

/* section round corner */

[data-section-id="66c34caca7733b73e6b25a77"] {
    position: relative;
    z-index: 2; 
    overflow: visible;
    margin-bottom: -100px;
  	margin-top: -100px;
}

[data-section-id="66c341699fe79478bcedcc41"] {
    position: relative;
    z-index: 2; 
    overflow: visible;
    margin-bottom: -100px;
  	margin-top: -100px;
}

[data-section-id="66c88ac7aa2c9f5cff5ac6c3"].page-section, [data-section-id="66c88ac7aa2c9f5cff5ac6c6"].page-section {
  background: #fbfbfb 0% 0% no-repeat padding-box !important;
  border-radius: 100px 0px 100px 0px;
  overflow: hidden;
}

Found that I had to tweak the code a bit, but now I got it working –Thanks @Ziggy!🫶
 

/* section round corner */

[data-section-id="66c34caca7733b73e6b25a77"] {
    position: relative;
    z-index: 2; 
    overflow: visible;
    margin-bottom: -100px;
  	margin-top: -100px;
}

[data-section-id="66c341699fe79478bcedcc41"] {
    position: relative;
    z-index: 2; 
    overflow: visible;
    margin-bottom: -100px;
  	margin-top: -100px;
}

[data-section-id="66c341699fe79478bcedcc41"].page-section, [data-section-id="66c34caca7733b73e6b25a77"].page-section {
  background: #fbfbfb 0% 0% no-repeat padding-box !important;
  border-radius: 100px 0px 100px 0px;
  overflow: hidden;
}

[data-section-id="66c34caca7733b73e6b25a77"] {
    position: relative;
    z-index: 2; 
    overflow: visible;
    margin-bottom: -100px;
  	margin-top: -100px;
}

[data-section-id="66c341699fe79478bcedcc41"] {
    position: relative;
    z-index: 2; 
    overflow: visible;
    margin-bottom: -100px;
  	margin-top: -100px;
}

[data-section-id="66c88ac7aa2c9f5cff5ac6c3"].page-section, [data-section-id="66c88ac7aa2c9f5cff5ac6c6"].page-section {
  background: #fbfbfb 0% 0% no-repeat padding-box !important;
  border-radius: 100px 0px 100px 0px;
  overflow: hidden;
}