CODEWITHSUNDEEP
htmlcssvideoiframe
carl saptarshi
carl saptarshi

Reputation: 355

How to place Div below my iFrame video

I currently have a iframe video and sitting on top of this are 4 clickable images. Below this, I want to have a contact Me page, however, the problem I am facing is How to get my Contact Me div blow the iframe video. Can someone Help me sort this problem out? Currently, on my codepen, you will see that i have applied a linear gradriend which is where the video is to be placed, and even though I have a Contact Me div in place, it is not placed in the top left hand corner, behind the iframe video, and I want it to be below the div, totally separated from it.

You can see my code on my Codepen, here

and this is what i currently have : enter image description here

.

As you can see from the screen shot, this is the front page, but the "contact me" div is placed behind the video, in the top corner... can someone help me fix this issue?

Upvotes: 0

Views: 832

Answers (2)

Hadeel Alharthi
Hadeel Alharthi

Reputation: 84

You have too many elements with absolute positioning. You don't need all of that. To position an element absolutely relative to its parent element all you have to do is add position: relative to the parent and position: absolute to the child.

And because you're positioning everything absolutely, elements are losing their height and it's why your contact div is moving to the top because the flow of the page is broken, and therefore, your contact div doesn't really see elements above it. Plus, you have color: white on the body and that applies to everything on your page including the contact div. change it and you'll find your contact on top of your header.

If you need more info I'm happy to help.

Upvotes: 1

Thomas
Thomas

Reputation: 177

Your contact header is there. It is in the top left corner, but it is white (at least that is what I see on the code link)Give the <h1> a style color to help make it stand out, <h1 style="color:blue;"> etc. Also move the div to above the image in your code. That should also help.

Upvotes: 0

Related Questions