Please explain the principle.
Page Code:
< div id= "main" >
<div id="index_b_hero">
<div class="title_img"></div>
</div>
< / div >
css Code:
1,-sharpmain {overflow: hidden; zoom: 1; position: relative; margin-bottom:100px;}
2,-sharpindex_b_hero {width:1280px; height: 540px; margin: auto; position: relative;}
3,-sharpindex_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;
}
effect is
question:
1, isn"t the code overflow: hidden; hidden div? Why does it show
2? when I comment out the second piece of code, the div is hidden and the page is blank. What does this code do?
http://www.w3school.com.cn/cs.
definition and usage
overflow attribute specifies what happens when content overflows the element box .
explains that the
attribute defines how the content of the overflow element content area will be handled. If the value is scroll, the user agent provides a scrolling mechanism whether it is needed or not. Therefore, it is possible that a scroll bar will appear even if everything can be dropped in the element box.
1.overflow: the function of hidden is to solve the problem of displaying the complete child element
2 when the child element has a floating element that exceeds the height of the parent element or when the child element exceeds the height of the parent element. The second section of code behind, the-sharpindex_b_hero attribute is empty, then the location of the title_img will find the main element, but the width and height of the main element is 0, so the first overflow:hidden does not show
the first overflow:hidden is not hidden div, it is beyond the part to hide the div should be display:none
second, if your second code is-sharpindex_b_hero, without the parent location, it should be located with window as the parent. The
overflow attribute specifies what happens if the content overflows an element's box.
visible default value. The content will not be trimmed and will be rendered outside the element box. The
hidden content is trimmed and the rest is invisible. The
scroll content is trimmed, but the browser displays a scroll bar to see the rest.
auto if the content is trimmed, the browser displays a scroll bar to view the rest of the content.
inherit specifies that the value of the overflow attribute should be inherited from the parent element.
overflow:hidden the excess part does not show
if the width and height of a block-level element is not specified, the default is width 100% , height is 0 , but the child element can be stretched out
so the height of your main is stretched by index_b_hero , and the width is width:100%,height:540px;. The child element is not exceeded, so it is not cropped, but when you reduce the width of the browser window, you will find that the scroll bar does not appear horizontally because main has a width of 100% exceeds cropping
.
position: absolute; absolute positioning
relative to the first parent element other than static location. After you comment out css of index_b_hero , title_img locates
according to main . After using absolute , all the parent element height cannot be supported by the document stream, then main width and height is width:100%,height:0; < /
agree with the view of the first floor
