                        課程
                    
                        /前端開發
                        
                            /HTML/CSS
                        
                        /CSS深入理解之overflow

失效的妙用，無原代碼很難理解，有的請提供，先謝

失效的妙用

慕粉4042427

2016-10-25

源自：CSS深入理解之overflow 4-1

關注問題我要回答

1588

操作

收起

2 回答

嗶哩嗶哩Hong 回答被采納 +3 積分
2016-10-27

<!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">
			&nbsp;
			<div?class="rightlist">
				<a?href="#"?class="icon"></a>
			</div>
		</div>
		
	</div>
</body>
</html>

可以看老師的absolute，其實主要利用的應該還是absolute的追隨性

原理：

list是塊狀元素，自己占了一行，text-align:right則其中的元素會在右邊

將rightlist設為display:inline，本來rightlist會在&nbsp的右邊

但rightlist設了position:fixed，則rightlist脫離了文檔流，但由于追隨性還會在原來的那一行，這樣就可以固定在界面的右邊了

而且此時，由于rightlist設置了position，overflow元素的子元素含有包含塊，所以overflow失效，所以并不會將子元素rightlist隱藏