CSS2是WEB開發中較老的一個版本,其中的定位技巧在現在的WEB開發中仍然十分實用。以下是一些常用的CSS2定位技巧:
.position-relative{ position: relative; } .position-absolute{ position: absolute; top: 0; left: 0; } .position-fixed{ position: fixed; top: 0; left: 0; }
CSS2中的position屬性可以設置元素的定位方式,常見的有相對定位、絕對定位以及固定定位。相對定位的元素是相對于自己本來的位置進行移動,而絕對定位的元素是相對于其父元素進行移動,固定定位的元素則是相對于瀏覽器的窗口進行移動。
通過設置top、right、bottom、left屬性可以控制定位元素的位置。其中top表示元素上方的邊框距頂部的距離,right表示元素右側的邊框距右側邊界的距離,bottom表示元素下方的邊框距底部的距離,left表示元素左側的邊框距左側邊界的距離。
.box { position: relative; width: 200px; height: 200px; } .inner-box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
在使用絕對定位時,可以通過設置top和left為50%,然后通過transform屬性的translate函數將元素向左、向上移動自身寬高的一半,從而將元素的中心點定位在父元素的中心位置。
除了上述定位技巧外,CSS2中還有很多實用的定位屬性,如z-index用于設置元素的層級關系、float用于設置元素的浮動、clear用于消除元素浮動對布局的影響等等。
上一篇css3 after邊框
下一篇css2條邊