[Back To Basic] CSS overflow

overflow

• 發動條件: 區塊有設定 height 時

當內文超出一個區塊時，共有四種應對方式

• 1. overflow: visible(預設值)

當內文超出時，超出的內文會被保留(看得見)

• 2. overflow: hidden

當內文超出時，超出的內文會被裁切掉(看不見)

• 3. overflow: scroll
• 當內文超出時，超出的內文會被裁切掉，並且加上滾軸，滾動可看到所有內文
• 水平和垂直的滾軸會同時被加上，即便不需要

• 4. overflow: auto

跟 overflow: scroll 類似，但只有在必要時會加上滾軸。

overflow-x and overflow-y

• overflow-x

針對水平滾軸的設定

• overflow-y

針對垂直滾軸的設定

source code

[Back To Basic] CSS position

position

共有五種

• static(預設值)
• relative
• fixed
• absolute
• sticky

註:

• top bottom left right 屬性，使用前必須先指定position
• 每個 position 對 top bottom left right 屬性解釋的方式也不同

position: static

• 不受 top bottom left right影響
• 遵循瀏覽器預設的排版規則

position: relative

• 會受 top bottom left right影響
• 設定 relative後，會依據 top bottom left right 調整相對於預設位置的位置

position: fixed

• 會受 top bottom left right影響
• 設定 fixed 後，會依據 top bottom left right 調整相對於整個視窗的位置

position: absolute

• 會受 top bottom left right影響
• 設定 absolute後，會 top bottom left right 調整相對於父元素位置的位置
• 如果沒有父元素位置，則以 body 來調整
• 父元素位置: 就是父元素的position不能是static

position: sticky

• 會受 top bottom left right影響
• 設定 sticky後，會 top bottom left right 調整相對於Scrollbar的位置
• 依據scrollbar的位置，sticky 會在 relative 和 fix 間切換
• position 會一直保持 relative，直到滾動到指定的偏移位置(offset)，之後會改成 fixed

重疊元素

• 元素定位之後，元素可以互相交疊
• z-index 可以指定元素的前後

source code

[Back To Basic] CSS max-width

區塊元素的特性

• 會自動延展寬度到瀏覽器的邊界
• 設定 width 後可以控制元素的寬度
• 但在螢幕解析度較小的環境元素會溢出
• 藉由 max-width 來代替 width 可避免溢出的情況

註: 使用 margin: auto 的話，會自動將整個區塊置中

source code