CSS中的定位方式是指控制HTML元素在頁面上顯示位置的方式。常用的定位方式有以下幾種:
position: static; position: relative; position: absolute; position: fixed; position: sticky;
1. static
static是默認定位方式,元素會按照文檔流自然排列。如果想要用其他定位方式,需要先將元素的position屬性設置為其他值。
2. relative
relative相對定位,元素會相對于自身在文檔流中的位置進行定位。通過設置top、right、bottom、left屬性來控制相對位移。
.box { position: relative; top: 10px; left: 20px; }
3. absolute
absolute絕對定位,元素會相對于距離它最近的非static定位祖先元素進行定位。如果不存在非static定位的祖先元素,則相對于文檔邊界定位。通過設置top、right、bottom、left屬性來控制相對位移。
.box { position: absolute; top: 50px; right: 100px; }
4. fixed
fixed固定定位,元素會相對于瀏覽器窗口進行定位,不隨滾動條滾動而移動。通過設置top、right、bottom、left屬性來控制相對位移。
.box { position: fixed; bottom: 30px; right: 20px; }
5. sticky
sticky粘性定位,元素會根據滾動條的位置,在滿足一定條件時變為fixed定位,不隨滾動條滾動而移動。通過設置top、right、bottom、left屬性來控制相對位移。該定位方式在一些新版本的瀏覽器中才支持。
.box { position: sticky; top: 20px; }
以上是常用的CSS定位方式,不同的定位方式可以滿足不同的布局需求。
上一篇mysql啟動后看不到
下一篇MySQL二級歷年真題