請解答一下原理

頁面代碼：
<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、當(dāng)我注釋掉第二段代碼，div又隱藏了，頁面空白，這段代碼起什么作用？

回答

編輯回答

初心

1.overflow: hidden的作用是解決子元素有浮動元素超出父元素或子元素超出父元素高度的時(shí)候顯示完整子元素
2.第二段代碼隱藏，#index_b_hero屬性為空，那么title_img的定位就會找main元素，但是main元素的寬高都為0，所以不顯示

2017年9月8日 17:17

編輯回答

喜歡你

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

定義和用法
overflow 屬性規(guī)定當(dāng)內(nèi)容溢出元素框時(shí)發(fā)生的事情。
說明
這個(gè)屬性定義溢出元素內(nèi)容區(qū)的內(nèi)容會如何處理。如果值為 scroll，不論是否需要，用戶代理都會提供一種滾動機(jī)制。因此，有可能即使元素框中可以放下所有內(nèi)容也會出現(xiàn)滾動條。

2018年3月4日 01:55

編輯回答

檸檬藍(lán)

overflow:hidden 超出裁剪也就是超出的部分不顯示
一個(gè)塊級元素寬高不指定的話默認(rèn)width為100% ，height為0不過子元素可以撐開高度
所以你的main的高被index_b_hero撐開了，寬高是width:100%,height:540px; 子元素并沒有超出所以沒有裁剪但是當(dāng)你縮小瀏覽器窗口的寬度的時(shí)候就會發(fā)現(xiàn)橫向不會出現(xiàn)滾動條因?yàn)?code>main的寬為100%超出裁剪

position: absolute; 絕對定位
相對于 static 定位以外的第一個(gè)父元素進(jìn)行定位你這里把index_b_hero的css注釋掉之后 title_img就根據(jù)main定位了
使用absolute之后脫離了文檔流所有撐不開父元素高度這時(shí) main寬高為width:100%,height:0;因?yàn)闆]有高度所以裁剪了子元素

2017年3月21日 01:00

編輯回答

焚音

overflow 屬性指定如果內(nèi)容溢出一個(gè)元素的框，會發(fā)生什么。
visible 默認(rèn)值。內(nèi)容不會被修剪，會呈現(xiàn)在元素框之外。
hidden 內(nèi)容會被修剪，并且其余內(nèi)容是不可見的。
scroll 內(nèi)容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內(nèi)容。
auto 如果內(nèi)容被修剪，則瀏覽器會顯示滾動條以便查看其余的內(nèi)容。
inherit 規(guī)定應(yīng)該從父元素繼承 overflow 屬性的值。

2018年5月22日 00:30

編輯回答