前端知識小結-CSS定位(position)的分類及用法
阿新 • • 發佈:2018-12-26
在複習的過程中總結了一些知識點,在以後會陸續分享給大家,有不對的地方也請大家指正!!!
CSS定位分類及用法
1.預設定位
position:static
在不寫的情況下預設為預設定位
2.絕對定位
position:absoluted
相對於最近的父元素定位,定位後空間釋放
3.相對定位
position:relative
相對於自己定位,定位後空間不釋放
4.固定定位
position:fixed
相對於瀏覽器定位,定位後空間釋放
5.吸頂定位
position:sticky
空間釋放
以下附上吸頂定位程式碼測試:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0px; padding: 0px; } body { height: 2000px; background: #63a35c; } #div1{ position: sticky; left: 100px; top: 0px; background: red; width: 200px; } </style> </head> <body> adqwdqdqdq <div id="div1"> dgasgasfas </div> </body> </html>
歡迎大家提出各種意見,定位是我們在css學習中很重要的一部分知識,在專案中會經常用到,在找工作面試時也是考官經常問的問題,希望本文對大家的學習有所幫助!!!