Div above another div

Hi, I’m trying to make this section of my homepage. And I find it problematic to make this form placed on top of two other sections.

I don’t know if I did it right but I created another section for the form and put it in a relative position and put the specific measures. The only problem is that it creates empty space in the lower area.

So I kindly ask you if you think I’m wrong method or other. Do you have any advice? How would you do it?

Read-only link here

Hi @Harda_Chadi , I would suggest against using this method to place the form block above the map. Instead, you can place all of the Map, Contact info and Form block into the same Section. Only the form block will have position: absolute. The Section will need position: relative so that the form block can position relative to it. You will need to fine tune your height property too from what I can see.

Screen Shot 2021-01-30 at 6.13.17 AM

1 Like

First of all thanks for replying. I tried as you said but now the footer is like it is behind the section. I don’t know what I did wrong but I did the simple things you told me.!

Read-only link here

hi @Harda_Chadi here is what @dennyhartanto mean

EDIT: I was now checking on your overlapping issue . You have to work with you section 14. This section have height 50VH and image (map) 100%. This mean that background image take whole space and push section that is after image OUT of SECTION. This will cause footer overlapping.

It is clear but the footer continues to stay behind the text, and not below. I do not understand why


check my EDIT of previous response

I have only read your edit now. I understand the mistake, thank you.

1 Like

Hi @Harda_Chadi if this problem was solved feel free to close this request by mark any response as solution

Have a good day

1 Like

@Stan Thank you for clarifying the height property on the section! I shouldve specified this when I mentioned it earlier.