CSS中有三种定位方式:相对定位、绝对定位和固定定位。在本文中,我们将学习绝对定位的
用法,特别是在定位副导航方面的应用。绝对定位的特点是脱离文档流,相对于最近的定位祖先元素或根元素进行定位。
在实现副导航的绝对定位时,我们首先需要为副导航所在的容器设置相对定位。
.nav-container {
position: relative;
}
接下来,为副导航设置绝对定位,同时指定其距离容器顶部的距离和左侧的距离。
.sub-nav {
position: absolute;
top: 50px;
left: 0;
}
此时,副导航将会相对于最近的定位祖先元素(即.nav-container)进行定位,距离容器顶部50像素,距离容器左侧0像素。我们还可以利用z-index
属性控制副导航的层次。
.sub-nav {
position: absolute;
top: 50px;
left: 0;
z-index: 1;
}
绝对定位还可以结合偏移
属性(top、right、b
ottom、left)进行微调,例如:
.sub-nav {
position: absolute;
top: 50px;
left: 0;
z-index: 1;
padding: 10px;
background-color: #fff;
border: 1px solid #ccc;
Box-shadow: 1px 1px 5px rgba(0,0.3);
}
.sub-nav li {
margin: 10px 0;
}
.sub-nav a {
color: #333;
text-decoration: none;
}
.sub-nav a:hover {
color: #f00;
}
通过
添加padding、border和
Box-shadow等样式,我们为副导航
增加了一些美观的
效果。最后的
效果如下图所示:
绝对定位是
一个非常实用的CSS技巧,在不破坏
页面结构的前提下,可以为
页面增加更多的动态
效果。