All geek questions in one place

Relative (positioned) div with top edge inside another relative div

In short, I have a relatively positioned div with the following style:

.div1 { background-image: url(../images/header.jpg); background-repeat: no-repeat; width: 100%; height: 269px; margin:0 auto; padding:0px; position: relative; background-position: center top; }

and another div in it looks like this:

 .div2 { position: relative; width: 815px; height: 74px; margin-top:100px; }

Interestingly, due to the div2 (child) field inside div1 (the parent) and the fact that it is positioned relatively, it pushes div1 (which is strange) by 100px. Even more interesting, if I either added a border to div1 or wrote something in it, this behavior goes away.

If someone knows why this is happening and also has a clean solution to this problem, I would really like to take your brain.

+4
source share
2 answers

This is due to "short-term fields."

Specification:

A bit easier to read:

As already suggested by Aram Mkrtchyan, the simplest solution in this case is perhaps to add overflow: hidden in .header . Here are some more ideas.

+1
source

there is an example

http://jsfiddle.net/amkrtchyan/urNRR/

 .header { background-image: url(../images/header.jpg); background-repeat: no-repeat; width: 100%; height: 269px; margin:0 auto; padding:0px; position: relative; background-position: center top; overflow: hidden // add this }
+3
source

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

More articles:


All Articles