七、相对定位

一、本课目标

了解定位属性在网页中的使用
掌握相对定位属性的使用及应用场景

二、定位

image.png

后三个非常重要，在网页中使用的非常多。

2.1static属性值

没有定位，以标准流的方式显示
示例代码：（给第一个盒子加上static）

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #father{
            border: 1px #666 solid;
            padding: 0;
        }
        #first{
            background-color: #f2bb6f;
            border: 1px #B55A00 dashed;
            position: static;
        }
        #second{
            background-color: #003580;
            border: 1px #0000A8 dashed;
        }
        #third{
            background-color: #f3f3f3;
            border: 1px #395E4F dashed;
        }
    </style>
</head>
<body>
<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>
</body>
</html>

运行结果：

image.png

2.2relative属性值

相对自身原来位置进行偏移，偏移设置：top、left、right、bottom

示例代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #father{
            border: 1px #666 solid;
            padding: 0;
            margin: 10px;
        }
        #first{
            margin: 10px;;
            background-color: #f2bb6f;
            border: 1px #B55A00 dashed;
            position: relative;
            top: -20px;
            left: 20px;
        }
        #second{
            margin: 10px;;
            background-color: #003580;
            border: 1px #0000A8 dashed;
        }
        #third{
            margin: 10px;;
            background-color: #f3f3f3;
            border: 1px #395E4F dashed;
            /*position:relative;*/
            right:  20px;
            bottom: 30px;
        }
    </style>
</head>
<body>
<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>
</body>
</html>

运行结果：

image.png

分析：观察第一个盒子，设置了相对偏移，位置也发生了改变；观察第三个元素，没有设置position的属性值，只有right和bottom，并没有发生任何偏移。

规律如下：

设置相对定位的盒子会相对它原来的位置，通过指定偏移，到达新的位置。
设置相对定位的盒子的位置仍保留在标准文档流中
设置相对定位的盒子原来的位置会被保留下来
它的层级提高了，偏移的元素会盖在原来的元素上面

偏移量的正负如下：

image.png

注：这个坐标轴的上下左右全TM是反的。

因为偏移会是偏移元素的层级提高，而浮动也会使元素层级提高，当两者都发生在一个元素上的时候，会发生怎么样的火花？

设置第二个盒子右浮动，再设置第一、第二盒子相对定位。
示例代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #father{
            border: 1px #666 solid;
            padding: 0;
            margin: 10px;
        }
        #first{
            margin: 10px;;
            background-color: #f2bb6f;
            border: 1px #B55A00 dashed;
            position: relative;
            right: 20px;
            bottom: 20px;
        }
        #second{
            margin: 10px;;
            background-color: #003580;
            border: 1px #0000A8 dashed;
            float: right;
            position: relative;
            left: 20px;
            top: -20px;
        }
        #third{
            margin: 10px;;
            background-color: #f3f3f3;
            border: 1px #395E4F dashed;
        }
    </style>
</head>
<body>
<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>
</body>
</html>

运行结果：

image.png

结果分析：先设置第二个盒子浮动之后，再在其上加上定位，第二个盒子会以浮动后的位置作为基准进行便宜。

最后编辑于：2018.06.17 09:58:50