using css -top value to move a div position

Question

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?

That gap looks about 40px tall. Can you see the number anywhere in your CSS? — Griffin
– Griffin, Commented Apr 6, 2012 at 23:44

ScottS · Accepted Answer · 2012-04-06 23:53:39Z

5

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.

edited Apr 6, 2012 at 23:53

answered Apr 6, 2012 at 23:45

ScottS

72.4k13 gold badges131 silver badges155 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Starx · Accepted Answer · 2012-04-06 23:44:38Z

2

Use position: absolute; instead of relative

answered Apr 6, 2012 at 23:44

Starx

79.3k50 gold badges187 silver badges266 bronze badges

Comments

Hilda Stastna · Accepted Answer · 2023-04-24 17:33:42Z

0

If you want to position one element over some other one which is higher in the hierarchy, using z-index CSS property worth considering to use, see for more: https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

answered Apr 24, 2023 at 17:33

Hilda Stastna

691 silver badge1 bronze badge

Collectives™ on Stack Overflow

using css -top value to move a div position

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related