首頁猿問請解答一下原理

請解答一下原理

JavaScript

慕田峪7331174 2019-03-20 21:15:59

頁面代碼：<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又隱藏了，頁面空白，這段代碼起什么作用？

查看完整描述

5 回答

素胚勾勒不出你

TA貢獻1827條經驗獲得超9個贊

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

反對回復 2019-03-28

滄海一幻覺

TA貢獻1824條經驗獲得超5個贊

第一 overflow：hidden 并不是隱藏div 他是超出部分隱藏隱藏div應該是display：none
第二如果你的第二段代碼是#index_b_hero的話沒有了父級定位應該是以window為父級定位的，并不是消失了

反對回復 2019-03-28

慕無忌1623718

TA貢獻1744條經驗獲得超4個贊

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

反對回復 2019-03-28

波斯汪

TA貢獻1811條經驗獲得超4個贊

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

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