CSS中的絕對定位(absolute)可以讓元素脫離文檔流,相對于其最近的具有定位屬性(position不為static)的父元素定位,或相對于文檔定位。通過使用多個絕對定位的盒子,可以實現各種復雜的布局效果。
.box1{ position: relative; } .box2, .box3{ position: absolute; top: 0; } .box2{ right: 0; } .box3{ right: 50%; }
上面的代碼中,.box1是一個相對定位的盒子,.box2和.box3是絕對定位的盒子。在.box1內部,.box2和.box3的top值都為0,相對于.box1頂部位置定位。.box2的right值為0,相對于.box1右側位置定位。.box3的right值為50%,相對于.box1寬度的一半定位。
除了相對定位,也可以在文檔中加一個容器,作為多個絕對定位盒子的父元素。下面的代碼演示了三個絕對定位的盒子在一個相對定位的父元素中定位。
.container{ position: relative; } .box4, .box5, .box6{ position: absolute; } .box4{ top: 0; left: 0; } .box5{ bottom: 0; left: 0; } .box6{ top: 50%; right: 0; transform: translateY(-50%); }
上述代碼中,.container是一個相對定位的容器盒子,.box4、.box5和.box6是絕對定位的盒子。.box4定位在.container的左上角,.box5定位在.container的左下角。.box6定位在.container的右側,上下居中。
通過在文檔中嵌套多個定位容器,多個絕對定位的盒子可以各自定位,從而實現豐富多彩的布局效果。