固定元素，不隨頁面改變位置position:fixed
阿新 • • 發佈：2018-12-07
當頁面滑動到第2個頁面時，黃色固定元素一直處於初始化的位置不變，實現這個功能：
1、使用position：fixed；還需要指定位置，比如top、right值等。
2、注意【需要固定的元素在html中放置的位置】
下面的程式碼中，“第2個固定” 顯示在頁面上，而 "第1個固定" 沒有顯示，因為“第2個固定”放在後面，這樣會覆蓋前面元素的z-index等級，如果想讓 "第1個固定"顯示，則需要新增 " z-index:999; ",使其等級高於其他元素即可。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>練習的地方</title> <style> .divStyle{width: 1000px;height: 1000px;margin:20px auto;border: 1px solid red;} .fixed{position:fixed;top:30%;right:30%;width: 100px;height: 100px;border-radius: 50px;background: yellow;text-align: center;line-height: 100px;} </style> </head> <body> <div class="fixed">第1個固定</div> <div class="divStyle">第1個頁面</div> <div class="divStyle">第2個頁面</div> <div class="fixed">第2個固定</div> </body> </html>