All geek questions in one place

Relative CSS positioning with negative value and height

I am trying to negatively position a DIV element (in the #content example), but my problem is the div container (# wrapper2) gets too high (actually this is the height that #content gives, but since I move the content up, I would like reduce the height of # wrapper2 accordingly).

Here I give you an example to show what I'm trying to achieve. If you try the sample, you will see that the footer is too far from the container. I can make a dirty hack here and make the top of the footer: -200px too, but then the scroll bar of the window goes over the footer.

<!DOCTYPE html> <html> <head> <title>Relative positioning demo</title> <style> /* RESET STUFF */ html { margin:0; padding:0; border:0; } body, div, p, h1 { margin: 0; padding: 0; border: 0; } /* END RESET */ h1 { background-color: yellow; } p { margin-bottom: 1em; } /* LAYOUT */ #wrapper1 { text-align: center; height: 250px; background-color: lightgray; } #wrapper2 { background-color: lightblue; } #content { width: 950px; margin: 0 auto; background-color: white; padding: 5px; height: 560px; /* HERE my problem */ position: relative; top: -200px; } #footer { background-color: black; color: white; height: 40px; line-height: 40px; text-align: center; } </style> </head> <body> <div id="wrapper1"> <h1>This is my heading</h1> </div> <div id="wrapper2"> <div id="content"> My content here </div> </div> <div id="footer"> lorem ipsum </div> </body> </html>

If you have any suggestions, keep in mind that I should see both a light and a light background (these are images on my website), so margin-top: -200px is not an option (for example, someone suggested in related questions I was looking for)

Thanks!

+6
source share
2 answers

For future references, what I finally did was combine the images on wrapper1 and wrapper 2 on the same image (they were background patterns), so now I only have one wrapper and I don't need the relative position of the content above the second , it just follows the page stream.

In the end, I realized that you cannot remove unwanted heights without using some kind of Javascript.

0
source

Change the top property to margin-top

Demo

  position: relative; top: -200px;

changed to

  margin-top: -200px;
+11
source

Source: https://habr.com/ru/post/900068/

More articles:


All Articles