请解答一下原理

Question

页面代码：
<div id="main">

<div id="index_b_hero">
    <div class="title_img"></div>
</div>

</div>
css代码:
1、#main {overflow: hidden; zoom: 1; position: relative; margin-bottom:100px; }
2、#index_b_hero { width:1280px; height: 540px; margin: auto; position: relative; }
3、#index_b_hero .title_img{

position:absolute; 
background:url(../img/title_img_03.png) no-repeat; 
height:550px; 
width:385px; 
z-index:55; 
top:0px; 
left:0px;

}
效果是：

问题：
1、overflow: hidden;这段代码不是把div隐藏了吗？为什么会显示出来了
2、当我注释掉第二段代码，div又隐藏了，页面空白，这段代码起什么作用？

Answer 1

http://www.w3school.com.cn/cs...

定义和用法
overflow 属性规定当内容溢出元素框时发生的事情。
说明
这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。

Answer 2

1.overflow: hidden的作用是解决子元素有浮动元素超出父元素或子元素超出父元素高度的时候显示完整子元素
2.第二段代码隐藏，#index_b_hero属性为空，那么title_img的定位就会找main元素，但是main元素的宽高都为0，所以不显示

Answer 3

第一 overflow：hidden 并不是隐藏div 他是超出部分隐藏 隐藏div应该是display：none
第二 如果你的第二段代码是#index_b_hero的话 没有了父级定位 应该是以window为父级定位的，并不是消失了

Answer 4

overflow 属性指定如果内容溢出一个元素的框，会发生什么。
visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。

Answer 5

overflow:hidden 超出裁剪 也就是超出的部分不显示
一个块级元素宽高不指定的话 默认width为100% ，height为0不过子元素可以撑开高度
所以你的main的高被index_b_hero撑开了，宽高是width:100%,height:540px; 子元素并没有超出所以没有裁剪 但是当你缩小浏览器窗口的宽度的时候就会发现横向不会出现滚动条 因为main的宽为100%超出裁剪

position: absolute; 绝对定位
相对于 static 定位以外的第一个父元素进行定位 你这里把index_b_hero的css注释掉之后 title_img就根据main定位了
使用absolute之后脱离了文档流 所有撑不开父元素高度 这时 main宽高为width:100%,height:0;因为没有高度所以裁剪了子元素

Answer 6

赞同1楼的看法