定位

主要内容

相对定位
绝对定位
固定定位

相对定位

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

相对定位的性质

相对定位的元素，会在“老家留坑”，本质上仍然是在原来的位置，只不过渲染在新的地方而已，渲染的图形可以比喻成，不会对页面其他元素产生任何影响“影子”。

相对定位的用途

相对定位用来微调元素位置

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        nav {
            width: 960px;
            height: 40px;
            margin: 40px auto;
        }
        nav ul {
            list-style: none;
        }
        nav ul li{
            float: left;
            width: 120px;
            height: 40px;
            text-align: center;
            line-height: 40px;
        }
        nav ul li a {
            display: block;
            width: 120px;
            height: 40px;
            background-color: orange;
            color: white;
            text-decoration: none;
        }
        nav ul li a:hover {
            border-top: 3px solid red;
            position: relative;
            top: -3px;
            background-color: gold;
        }
    </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>
            <li>
                <a href="">网站栏目</a>
            </li>
            <li>
                <a href="">网站栏目</a>
            </li>
        </ul>
    </nav>
</body>
</html>

相对定位的位置描述词

left：盒子右移
right：盒子左移
top：盒子下移
bottom：盒子上移

值可以为负数，即往规定方向相反移动

绝对定位

绝对定位：盒子可以在浏览器中以坐标进行位置精准描述，拥有自己的绝对位置

绝对定位的位置描述词

left：到左边的距离
right：到右边的距离
top：到上边的距离
bottom：到下边的距离

ps: 如果用top描述，那么参考点就是页面的左上角，而不是浏览器的左上角;如果用bottom描述，那么参考点就是浏览器首屏窗口尺寸（好好理解“首屏”二字），对应的页面的左下角。如图所示:
图片描述

绝对定位脱离标准文档流

绝对定位的元素脱离标准文档流，将释放自己的位置，对其他元素不会产生任何干扰，而是对它们进行压盖。绝对定位之后，标签就不区分所谓的行内元素、块级元素了，不需要display:block就可以设置宽、高了。

绝对定位的参考盒子

绝对定位的盒子并不是永远以浏览器作为基准点。
绝对定位的盒子会以自己祖先元素中，离自己最近的拥有定位属性的盒子，当做基准点。这个盒子通常是相对定位的，所以这个性质也叫作“子绝父相”。

绝对定位的盒子垂直居中

position: absolute;
top:50%;
margin-top: -自己高度一半;

堆叠顺序z-index属性

z-index属性是一个没有单位的正整数，数值大的能够压住数值小的

有如下特性：

属性值大的位于上层，属性值小的位于下层。
z-index值没有单位，就是一个正整数。默认的z-index值是0。
如果大家都没有z-index值，或者z-index值一样，那么在HTML代码里写在后面，谁就在上面能压住别人。定位了的元素，永远能够压住没有定位的元素。
只有定位了的元素，才能有z-index值。也就是说，不管相对定位、绝对定位、固定定位，都可以使用z-index值。而浮动的元素不能用。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 在body标签中box2在box1后面，所以默认box2在上层，box1在下层 
            设置了z-index属性可以使box1压在box2上面*/
        .box1 {
            width: 300px;
            height: 300px;
            background-color: orange;
            position: absolute;
            top: 100px;
            left: 100px;
            z-index: 9999;
        }

        .box2 {
            width: 300px;
            height: 300px;
            background-color: blue;
            position: absolute;
            top: 200px;
            left: 200px;
            z-index: 999;
        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

</html>

固定定位

固定定位：就是相对浏览器窗口进行定位。无论页面如何滚动，这个盒子显示的位置不变。

固定定位注意事项

固定定位只能以页面为参考点，没有子固父相这个性质
固定定位脱离标准文档流

CSS3学习笔记(6)-定位

定位