定位实现侧边导航

最新推荐文章于 2024-03-20 16:27:32 发布

原创

最新推荐文章于 2024-03-20 16:27:32 发布 · 565 阅读

4 ·

CC 4.0 BY-SA版权

本文通过婚礼纪的案例，详细讲解如何利用CSS定位（包括relative和absolute）实现侧边导航的功能。同时介绍了定位原理，如相对定位的参照物和绝对定位的参照物规则，并给出了使导航固定在侧面的技巧。

很多页面都会有侧面导航，如图：

要实现这样的功能，无疑要用到定位，下面我以婚礼纪的例子讲解该功能是如何实现的。

说到定位，大家要想到position属性，父相子绝，position的其中两个属性值relative相对定位，absolute绝对定位，我解释一下什么是定位，相对定位的参照物是没有定位之前的位置，也就是盒子初始的位置，

绝对定位的参照物：

当元素的父元素都没有定位的时候参照物为浏览器的可是窗口（页面）；

当你其中一个父元素有定位的时候，那么这个元素的参照物就为这个定位元素；

当元素有多个父元素且都有定位的时候，元素会按照离自己最近的父元素（有定位）作为参照物

定位要配合一下属性才有效果：left、right、top、bottom。

下面是婚礼纪的案例：

HTML代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>婚礼纪案例</title>
    <link rel="stylesheet" href="../css/style.css">
</head>
<body>
    <div class="box">
        <!-- 咨询服务的盒子 -->
        <div class="box1">
            <img src="https: