Home >Web Front-end >HTML Tutorial >Very strange overflow:hidden and fixed issues_html/css_WEB-ITnose
Very strange overflow:hidden and fixed issues_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:16:272008browse
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>test</title> <script type="text/javascript" src="http://img.jb51.net/jslib/jquery/jquery.js"></script> <style type="text/css"> body{padding:10px;margin:0;} #box{width:200px; height:200px; float:left; overflow:hidden;margin:0 auto; background:#9C0;} .box2{ width:200px; height:300px; overflow:hidden; background:#CCC; position:fixed;}</style> </head> <body> <div id="box"> <div class="box2"></div></div> </body> </html> #The box height is 200px, and adding overflow:hidden can theoretically hide the part beyond .box2, but in fact it is not satisfactory. After removing the position:fixed of .box2, it will The excess part can be hidden. I am looking for a solution without removing the position:fixed of .box2.
Reply to discussion (solution)
This seems to be impossible.
Because fixed generates absolutely positioned elements, which are positioned relative to the browser window, the position of the element is specified through the "left", "top", "right" and "bottom" attributes.
Unless you change the position type to static, relative or inherit.
position:fixed;
will jump out of the standard file stream, which means fixed is for the window itself, so setting the attribute id="box" will not take effect. What is your intention?
The W3C official website clearly stipulates that position:fixed means that this div is positioned relative to the browser window,
rather than being affected by other divs. This point It’s not weird, it’s just that you don’t understand it properly.
Finally, I will quote you the official website reference: http://www.w3school.com.cn/css/pr_class_position.asp