April 6, 2012

using css -top value to move a div position

Question by Diver Dan

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


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 by ScottS

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.

Answer by Starx

Use position: absolute; instead of relative

Author: Nabin Nepal (Starx)

Hello, I am Nabin Nepal and you can call me Starx. This is my blog where write about my life and my involvements. I am a Software Developer, A Cyclist and a Realist. I hope you will find my blog interesting. Follow me on Google+


Please fill the form - I will response as fast as I can!