在css当中，有一个非常重要且常用的属性，这个属性就是定位属性！

定位属性（position），它的作用是检索或者设置元素的定位方式，也就是一个改变元素位置的属性。它有五个常用的属性值：static/ absolute/ relative/ fixed/ sticky

在进行元素定位的时候，有以下几个步骤：

  1. 给元素添加position属性，证明该元素要做位置的变化。
  2. 确定参照物！通过position的属性值来确定。
  3. 确定坐标，利用：left/ right/ top/ bottom

下面就来讲讲position各属性值：

1、static（静态定位）：这是position的默认值，默认文本流的状态，它不会识别left/ right/ top/ bottom指定的坐标，所以我就不过多解释。

2、absolute（绝对定位）：

a : 参照物：按照已经有定位的父元素进行位置的变化。
b : 假如 当前没有父元素 或者 父元素没有定位的情况下，以整个文档为参照物。
c : 绝对定位，脱离文档流、不占据空间

案例1：

<!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;
        }
        .box{
            width:700px;
            height:500px;
            background:orange;
            margin: 50px auto;
        }
        h2{
            width:200px;
            height:200px;
            background:blue;
            float:left;
        }
        h3{
            width:200px;
            height:200px;
            background:red;
            float:left;
            /* 绝对定位 */
            position: absolute;
            left:30px;
            top:60px;
        }
        h4{
            width:200px;
            height:200px;
            background:green;
            float:left;
        }
    </style>
</head>
<body>
    <div class="box">
        <h2>h2</h2>
        <h3>h3</h3>
        <h4>h4</h4>
    </div>
</body>
</html>

代码结果：我们可以看出在当前父元素box没有定位的情况下，h3以整个文档为参照物。

java 已css定位元素 css定位属性的运用_绝对定位

案例2：

<!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;
        }
        .box{
            width:700px;
            height:500px;
            background:orange;
            margin: 50px auto;
            position: relative;
        }
        h2{
            width:200px;
            height:200px;
            background:blue;
            float:left;
        }
        h3{
            width:200px;
            height:200px;
            background:red;
            float:left;
            /* 绝对定位 */
            position: absolute;
            left:30px;
            top:60px;
        }
        h4{
            width:200px;
            height:200px;
            background:green;
            float:left;
        }
    </style>
</head>
<body>
    <div class="box">
        <h2>h2</h2>
        <h3>h3</h3>
        <h4>h4</h4>
    </div>
</body>
</html>

代码结果：当父元素box有定位的时候，h3以父元素为参考物，我们也可以看出绝对定位脱离文档流、不占据空间。

java 已css定位元素 css定位属性的运用_绝对定位_02

 

3: relative（相对定位）：
a : 参照物：自身默认的位置！
b : 始终占据空间，不会破坏文档流

包含块的设置：
1：如果父元素为参照物：添加 position:relative;
2: 给要做定位的子元素 添加position:absolute;

<!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;
        }
        .box{
            width:700px;
            height:500px;
            background:orange;
            margin: 50px auto;
        }
        h2{
            width:200px;
            height:200px;
            background:blue;
            float:left;
        }
        h3{
            width:200px;
            height:200px;
            background:red;
            float:left;
            /* 相对定位 */
            position: relative;
            left:30px;
            top:60px;
        }
        h4{
            width:200px;
            height:200px;
            background:green;
            float:left;
        }
    </style>
</head>
<body>
    <div class="box">
        <h2>h2</h2>
        <h3>h3</h3>
        <h4>h4</h4>
    </div>
</body>
代码结果： 参照物为自身默认的位置，且始终占据空间，不会破坏文档流。

java 已css定位元素 css定位属性的运用_java 已css定位元素_03

  4：fixed（固定定位）
a ： 参照物：浏览器窗口
b ： 脱离整个文本流。不占据空间

需求：实现内容在浏览器中左右居中！

<!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;
        }
        .box{
            width:600px;
            height:300px;
            background:#ccc;
            margin:50px auto;
            position:fixed;
            left:0;right:0;
            top:0;bottom:0;
            margin:auto;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

代码结果：可以看出参照物为浏览器窗口

java 已css定位元素 css定位属性的运用_绝对定位_04

拓展：实现子元素在父元素上下左右居中显示。

<!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;
        }
        .box{
            width:600px;
            height:300px;
            background:#ccc;
            margin:50px auto;
            /* 形成参照物 */
            position: relative;
        }
        p{
            width: 100px;
            height: 100px;
            background: yellow;
            /* 上下左右居中 */
            position:absolute;
            left:0;right:0;
            top:0;bottom:0;
            margin:auto;
        }
    </style>
</head>
<body>
    <div class="box">
        <p></p>
    </div>
</body>
</html>

代码结果：

java 已css定位元素 css定位属性的运用_html_05

5：sticky（黏性定位）
position:relative 和 position:fixed的结合。
如果页面没超出窗口范围，按照relative 执行
如果内容超出窗口位置，按照fixed执行。

黏性定位经典效果：导航的吸顶效果。

<!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;
        }
        .header{
            width:100%;
            height:80px;
            background:orange;
        }
        .nav{
            width:1200px;
            height:40px;
            background:#000;
            color: red;
            font-size: 28px;
            line-height: 40px;
            text-align: center;
            margin:0 auto;
            position:sticky;
            top:0;
        }
        .content{
            width:100%;
            height:4000px;
            background:pink;
        }
    </style>
</head>
<body>
    <div class="header"></div>
    <div class="nav">这里是导航</div>
    <div class="content">
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
    </div>
</body>
</html>

代码结果：当鼠标下滑时，导航会上移至顶部然后一直吸附着，不随页面移动，体现出黏性定位的特点。

java 已css定位元素 css定位属性的运用_绝对定位_06

java 已css定位元素 css定位属性的运用_html_07

 

以上就是css定位属性position常用的几种属性，各自特点我已说明，具体的案例还需要根据需求灵活应用。