Diver Dan Diver Dan - 5 months ago 9
HTML Question

using css -top value to move a div position

Hi I am not sure if this is the right way to do it but I am trying to position a div tag back
over the previous div element
This is what I have working

example

my css that I have used to get this to work looks like

.page-frame {
background-color: #fff;
padding-top: 40px;
position: relative;
top: -35px;
}


so for the top part the div element looks the way I want it to however the bottom on the element hasn't adjusted for the -35px;

enter image description here

I have tried adding a clear div after the element however that doesnt help. What do I need to change to remove the space between my .page-frame div and the next div?

Answer

The use of position: relative only shifts the appearance of the element in the page, but not the actual "space" it takes up on the page. So what you have done made your visual change to show the element 35px higher, but it does not cause other elements to reflow around it. Probably, what you need to add is a margin-bottom: -35px to get the final effect you want.

EDIT: Added better fiddle example to show reflow with margin.

Comments