【CSS】 粘性定位 position: sticky;

CSS 的定位屬性有下列幾種

• position: static;
• position: relative;
• position: fixed;
• position: absolute;
• position: sticky;

fixed 很常被使用在 header、footer、右側滑動廣告
fixed 作為 header使用時，內容區塊往往要搭配 padding-top、 margin-top、 top，避面內容被刊頭遮擋住，用在 footer 時也會產生相同的問題。


fixed 在 footer 時，如果內容是 input 加上 IOS 系統，那只能說是一場災難，鍵盤擋住輸入框的問題一直困擾著設計師與工程師，但至今卻還沒有有個完美的解法。


使用position: sticky做 header、footer
目前看各家主要瀏覽器都支援 sticky 屬性


position: sticky有下列幾點特性：

1. 父元素不可以是 overflow:hidden，否則position: sticky功能會失效。
2. 父容器中的sticky元素，定位值相等時會重疊。
3. sticky定位，可設置top、bottom、left、right。

試做一個範例

header

測試頁面測試頁面測試頁面1
測試頁面測試頁面測試頁面2
測試頁面測試頁面測試頁面3
測試頁面測試頁面測試頁面4
測試頁面測試頁面測試頁面5
測試頁面測試頁面測試頁面6
測試頁面測試頁面測試頁面7
測試頁面測試頁面測試頁面8
測試頁面測試頁面測試頁面9
測試頁面測試頁面測試頁面10
測試頁面測試頁面測試頁面11
測試頁面測試頁面測試頁面12
測試頁面測試頁面測試頁面13
測試頁面測試頁面測試頁面14
測試頁面測試頁面測試頁面15
測試頁面測試頁面測試頁面16
測試頁面測試頁面測試頁面17
測試頁面測試頁面測試頁面18
測試頁面測試頁面測試頁面19
測試頁面測試頁面測試頁面20
測試頁面測試頁面測試頁面21
測試頁面測試頁面測試頁面22
測試頁面測試頁面測試頁面23
測試頁面測試頁面測試頁面24
測試頁面測試頁面測試頁面25
測試頁面測試頁面測試頁面26
測試頁面測試頁面測試頁面27
測試頁面測試頁面測試頁面28
測試頁面測試頁面測試頁面29
測試頁面測試頁面測試頁面30
測試頁面測試頁面測試頁面31
測試頁面測試頁面測試頁面32
測試頁面測試頁面測試頁面33
測試頁面測試頁面測試頁面34
測試頁面測試頁面測試頁面35
測試頁面測試頁面測試頁面36
測試頁面測試頁面測試頁面37
測試頁面測試頁面測試頁面38
測試頁面測試頁面測試頁面39
測試頁面測試頁面測試頁面40
測試頁面測試頁面測試頁面41
測試頁面測試頁面測試頁面42
測試頁面測試頁面測試頁面43
測試頁面測試頁面測試頁面44
測試頁面測試頁面測試頁面45
測試頁面測試頁面測試頁面46
測試頁面測試頁面測試頁面47
測試頁面測試頁面測試頁面48
測試頁面測試頁面測試頁面49
測試頁面測試頁面測試頁面50

footer

附上範例程式碼

<style>

.area-sticky{ margin: 0 10%; width: 80%; height: 300px; position: relative; }

p{ margin-bottom: 1em;}

.content{ padding: 0;}

.header,

.footer{ width: 100%; height: 48px; display: flex; justify-content: center; align-items: center; color: #fff; background: rgba(0,0,0,0.6); position: sticky; position: -webkit-sticky;}

.header{ top: 0px; left: 0; }

.footer{ bottom: 0; left: 0; }

</style>

<div class="area-sticky">

<div class="header">header</div>

<div class="content">

<p>測試頁面測試頁面測試頁面1</p>

<p>測試頁面測試頁面測試頁面2</p>

<p>測試頁面測試頁面測試頁面3</p>

<p>測試頁面測試頁面測試頁面4</p>

<p>測試頁面測試頁面測試頁面5</p>

<p>測試頁面測試頁面測試頁面6</p>

<p>測試頁面測試頁面測試頁面7</p>

<p>測試頁面測試頁面測試頁面8</p>

<p>測試頁面測試頁面測試頁面9</p>

<p>測試頁面測試頁面測試頁面10</p>

<p>測試頁面測試頁面測試頁面11</p>

<p>測試頁面測試頁面測試頁面12</p>

<p>測試頁面測試頁面測試頁面13</p>

<p>測試頁面測試頁面測試頁面14</p>

<p>測試頁面測試頁面測試頁面15</p>

<p>測試頁面測試頁面測試頁面16</p>

<p>測試頁面測試頁面測試頁面17</p>

<p>測試頁面測試頁面測試頁面18</p>

<p>測試頁面測試頁面測試頁面19</p>

<p>測試頁面測試頁面測試頁面20</p>

<p>測試頁面測試頁面測試頁面21</p>

<p>測試頁面測試頁面測試頁面22</p>

<p>測試頁面測試頁面測試頁面23</p>

<p>測試頁面測試頁面測試頁面24</p>

<p>測試頁面測試頁面測試頁面25</p>

<p>測試頁面測試頁面測試頁面26</p>

<p>測試頁面測試頁面測試頁面27</p>

<p>測試頁面測試頁面測試頁面28</p>

<p>測試頁面測試頁面測試頁面29</p>

<p>測試頁面測試頁面測試頁面30</p>

<p>測試頁面測試頁面測試頁面31</p>

<p>測試頁面測試頁面測試頁面32</p>

<p>測試頁面測試頁面測試頁面33</p>

<p>測試頁面測試頁面測試頁面34</p>

<p>測試頁面測試頁面測試頁面35</p>

<p>測試頁面測試頁面測試頁面36</p>

<p>測試頁面測試頁面測試頁面37</p>

<p>測試頁面測試頁面測試頁面38</p>

<p>測試頁面測試頁面測試頁面39</p>

<p>測試頁面測試頁面測試頁面40</p>

<p>測試頁面測試頁面測試頁面41</p>

<p>測試頁面測試頁面測試頁面42</p>

<p>測試頁面測試頁面測試頁面43</p>

<p>測試頁面測試頁面測試頁面44</p>

<p>測試頁面測試頁面測試頁面45</p>

<p>測試頁面測試頁面測試頁面46</p>

<p>測試頁面測試頁面測試頁面47</p>

<p>測試頁面測試頁面測試頁面48</p>

<p>測試頁面測試頁面測試頁面49</p>

<p>測試頁面測試頁面測試頁面50</p>

</div>

<div class="footer">footer</div>

</div>