overflow:hidden / scroll不會隱藏所有子元素
阿新 • • 發佈：2018-11-07
- 擁有overflow:hidden樣式的塊元素不具有position:relative和position:absolute樣式；
- 內部溢位的元素是通過position:absolute絕對定位，並且該定位元素的包含塊是設定overflow:hidden元素的父級元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,height=device-height"> <title>overflow:hidden / scroll不會隱藏所有子元素</title> <style> html, body { margin: 0; } .over-hidden{overflow:scroll; height:100px; font-size:14px; width:100px; border:2px dotted #ddd;} .outer{position:relative} .inner1{position:absolute; top:0;height: 200px; background:yellow;} .inner2{position:absolute; top:200px; background:pink;} </style> </head> <body> <div class='over-hidden'> <div class='outer'> <div class='inner1'>這是第一個盒子。這是第一個盒子</div> </div> <div class='inner2'>這是第二個盒子。這是第二個盒子</div> </div> </body> </html>