失效的妙用，无原代码很难理解，有的请提供，先谢
来源：4-1 overflow与absolute绝对定位
慕粉4042427
2016-10-25 19:21
失效的妙用
写回答
关注
2回答
-
- 哔哩哔哩Hong
- 2016-10-27 22:34:52
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style> html,body{width:100%;height:100%;margin:0;padding:0;} .main{width:600px;height:100%;background:#ccc;margin:0 auto;} .list{height:0;text-align:right;overflow:hidden;} .rightlist{display:inline;position:fixed;bottom:100px;margin-left:20px;} .icon{display:block;width:30px;height:30px;border-radius:50%;background:#000;} </style> </head> <body> <!--中间的主界面--> <div class="main"> <!--右边固定条--> <div class="list"> <div class="rightlist"> <a href="#" class="icon"></a> </div> </div> </div> </body> </html>可以看老师的absolute，其实主要利用的应该还是absolute的追随性
原理：
list是块状元素，自己占了一行，text-align:right则其中的元素会在右边
将rightlist设为display:inline，本来rightlist会在 的右边
但rightlist设了position:fixed，则rightlist脱离了文档流，但由于追随性还会在原来的那一行，这样就可以固定在界面的右边了
而且此时，由于rightlist设置了position，overflow元素的子元素含有包含块，所以overflow失效，所以并不会将子元素rightlist隐藏
-
- 妈妈说名字越长越好怎么滴
- 2017-09-26 17:12:16
即使overflow不失效，rightlist也不会隐藏不是吗？
CSS深入理解之overflow
深入理解overflow相关特性及实际应用，为你打开另外一扇学习之窗
41729 学习 · 78 问题
相似问题