相对定位相对定位：盒子可以相对自己原来的位置进行位置调整，称为相对定位。 position属性位置描述词 top 属

相对定位：

盒子可以相对自己原来的位置进行位置调整，称为相对定位。

position属性

位置描述词

top 属性：向下移动

left 属性：向右移动

bottom 属性：向上移动

right 属性：向左移动

**以上位置描述词值可以是负数，即往规定方向相反方向移动。 **

1）可以使用 top/right/bottom/left/z-index 进行相对定位---？相对定位是什么
(2) 相对定位的元素不会离开常规流-----心念家乡。

(3) 任何元素都可以设置为relative,它的绝对定位的后代都可以相对于它进行绝对定位----超好用

(4）可以使浮动元素发生偏移，并控制他们的堆叠顺序.

用途

相对定位用来微调元素

相对定位的元素，可以当做绝对定位的参考盒子

简单的导航条案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin:0;
            padding:0;
        }
        nav {
            width:960px;
            height:40px;
            /* border: 1px solid #000; */
            margin:40px auto;
        }
        nav ul {
            list-style:none;
        }
        nav ul li {
            float:left;
            width:160px;
            height:40px; 
            text-align:center;
            line-height:40px;
          

        }
        nav ul li a {
            display:block;
            width:160px;
            height:40px;
            background-color:orange;
            color:white;
            text-decoration:none;
        }
        nav ul li:hover {
        /* 使用相对定位将每一块导航条都向上浮动 */
            border-top: 3px solid red;
            position:relative;
            top:-3px;
        }
    </style>
</head>
<body>
    <nav>
        <ul>
            <li>
                <a href="">我是导航</a>
            </li>
            <li>
                <a href="">我是导航</a>
            </li>
            <li>
                <a href="">我是导航</a>
            </li>
            <li>
                <a href="">我是导航</a>
            </li>
            <li>
                <a href="">我是导航</a>
            </li>
            <li>
                <a href="">我是导航</a>
            </li>
            
        </ul>
    </nav>
</body>
</html>