Heim > Web-Frontend > HTML-Tutorial > 很诡异的overflow:hidden 与fixed问题_html/css_WEB-ITnose

很诡异的overflow:hidden 与fixed问题_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 12:16:27
Original
2008 Leute haben es durchsucht

<!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> 
Nach dem Login kopieren


#box高为200px,加上overflow:hidden理论上能对.box2超出部份隐藏,但实际上不尽人意,去掉.box2的position:fixed后就能隐藏超出部份了,在.box2的position:fixed不去掉的情况下求解决办法。


回复讨论(解决方案)

这个好像实现不了。
因为fixed 生成绝对定位的元素,相对于浏览器窗口进行定位,元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
除非你将position类型换成static、relative或inherit。 

position:fixed;
将跳出标准文件流,也就是说fixed 是针对窗口本身的,因此设置 id="box" 的属性是无法生效的。你的用意是什么呢

W3C的官网明确规定了, position:fixed表示,这个div是相对于浏览器窗口来定位,

而不是受其他div影响,这个一点也不诡异,是你理解不到位吧。

最后给你引用下官网的参考:  http://www.w3school.com.cn/css/pr_class_position.asp

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage