CODEWITHSUNDEEP
htmlcss
GJain
GJain

Reputation: 5093

Strange behavior with border in content

Please look at following

Fiddle1 Fiddle2 HTML:

<div class="container">
  <div class="content">
    <div class="space">
    </div>  
    <div class="item">
      DIV1
    </div>
  </div>
</div>

CSS:

.container {
  position:relative;
  height: 100%;
  width:100%;
}
.content {
  height:100%;
  border:1px solid red;
}
.space {
  margin-top:80px;
 border:1px solid blue;
}

.item {
  position: absolute;
  top:80px;
  left:50px;
  font-size:20px;
  font-weight:bold;
  color: #999999;
  text-align: center;
}

The only difference is the border statement in content class but output is different.

Can you please explain what is happening?

Upvotes: 0

Views: 51

Answers (2)

sagar
sagar

Reputation: 1432

.item is getting position absolute with top as 80px relative to .cointainer DIV. Element with position as absolute will position itself with reference to its parent whose position is defined as relative or to BODY element. In your case top most parent element .container is having positon: relative so for element .item top: 80px will be calculated from top of .container and since .item is positioned as absolute it will contained only withing its parent with position: relative or body element, so in your case its a top most element .container

Upvotes: 0

Ilya Streltsyn
Ilya Streltsyn

Reputation: 13536

It's margin collapsing. The border, when present, prevents the top margin of the .space from collapsing. Without the border, it collapses with the top margin of all its ancestors including body (which is the 'base' for the position of .item), causing them to move 80px down.

Upvotes: 1

Related Questions