Jump to content

Overlapping elements from one section to another

Recommended Posts

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!

Link to comment

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.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
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;
}

Link to comment
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!!

Link to comment
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;
}

 

 

Skærmbillede 2024-02-07 kl. 21.01.51.png

Link to comment
[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 😂

Link to comment
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?

Skærmbillede 2024-02-07 kl. 21.14.25.png

Link to comment
12 hours ago, nick_sh said:

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

image.thumb.png.c81923c5e12841b7e86fa9371d53f6f7.png

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

Link to comment

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

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
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!

Link to comment
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!!!!

Skærmbillede 2024-02-08 kl. 10.30.36.png

Link to comment
Just now, Floe said:

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

Well done!

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.