css定位的基础

css定位的基础

在我们编写HTML的文件的时候有很多的页面布局里元素的分布都不一样，在诸多页面的诸多布局里必不可少的就是元素的定位。

定位的属性为position ，其作用官方定义为检索或者设置元素的定位方式（改变元素位置的属性）而我们一般用来固定子元素在父元素中的位置。

以下是使用定位的步骤：

    1、给元素添加position属性，用来证明该元素要进行位置的变化。
    2、确定参照物（通过position的属性值来确定：static\absolute\relative\fixed\sticky等等）
    3、确定坐标 left  right  top  bottom

position的属性值（来确定定位方式【参照物】）：

1、static 即 静态定位：

    static是position的默认值，默认文本流的状态。
    不会识别left  right  top  bottom指定的坐标，相当于没有进行定位。

2、absolute 即 绝对定位:

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

<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;
        position: absolute;
    }
    h2{
        width:200px;
        height:200px;
        background:blue;
        float:left;
        position: absolute;
        left: 0;
        bottom: 0;
    }
    h3{
        width:200px;
        height:200px;
        background:red;
        float:left;
    }
    h4{
        width:200px;
        height:200px;
        background:green;
        float:left;
    }
</style>

<div class="box">
    <h2>h2</h2>
    <h3>h3</h3>
    <h4>h4</h4>
</div>

这是代码

这是效果图

由此可以看到绝对定位有一个特点，就是使用**position:absolute（绝对定位）**会脱离文档流，即不占据空间，在这个子元素之后的2个同级子元素会发生位置的变化。

3、relative 即 相对定位

     参照物：自身默认的位置
     特点：	始终占据空间，不会破坏文档流

<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;
    }
    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>

<div class="box">
    <h2>h2</h2>
    <h3>h3</h3>
    <h4>h4</h4>
</div>

这是代码截图

这是效果图

4、fixed 即 固定定位：

    参照物： 浏览器窗口
    特点：	脱离整个文本流。不占据空间

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
    *{margin: 0;padding: 0;}
    p{
        font-size: 30px;
    }
    .box{
        width: 300px;
        height: 200px;
        background: orange;
        /* 固定定位 */
        position:fixed;
        left:0;right:0;
        top:0;bottom:0;
        margin:auto;
    }
</style>

<p>111111111111111111111111111111</p>
<p>111111111111111111111111111111</p>
<p>111111111111111111111111111111</p>
<p>111111111111111111111111111111</p>
<p>111111111111111111111111111111</p>
<p>111111111111111111111111111111</p>
<p>111111111111111111111111111111</p>
<p>111111111111111111111111111111</p>
<p>111111111111111111111111111111</p>
<p>111111111111111111111111111111</p>
<p>111111111111111111111111111111</p>
<p>111111111111111111111111111111</p>
<p>111111111111111111111111111111</p>
<p>111111111111111111111111111111</p>
<p>111111111111111111111111111111</p>
<p>111111111111111111111111111111</p>
<p>111111111111111111111111111111</p>
<p>111111111111111111111111111111</p>
<p>111111111111111111111111111111</p>
<p>111111111111111111111111111111</p>
<p>111111111111111111111111111111</p>
<p>111111111111111111111111111111</p>
<p>111111111111111111111111111111</p>
<p>111111111111111111111111111111</p>
<p>111111111111111111111111111111</p>
<p>111111111111111111111111111111</p>
<p>111111111111111111111111111111</p>

<div class="box"></div>

这是代码截图

这是效果图

5:sticky 即 黏性定位
position：sticky是position:relative 和 position:fixed的结合。

    如果页面没超出窗口范围，按照relative 执行
    如果内容超出窗口位置，按照fixed执行。

这是代码

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
    *{margin: 0;padding: 0;}
    p{
        font-size: 30px;
    }
    .box{
        width: 300px;
        height: 200px;
        background: orange;
        position:sticky;
        top:0;
        margin:auto;
    }
</style>

<p>111111111111111111111111111111</p>
<p>111111111111111111111111111111</p>
<p>111111111111111111111111111111</p>
<p>111111111111111111111111111111</p>
<p>111111111111111111111111111111</p>
<p>111111111111111111111111111111</p>
<p>111111111111111111111111111111</p>
<p>111111111111111111111111111111</p>
<div class="box"></div>
<p>111111111111111111111111111111</p>
<p>111111111111111111111111111111</p>
<p>111111111111111111111111111111</p>
<p>111111111111111111111111111111</p>
<p>111111111111111111111111111111</p>
<p>111111111111111111111111111111</p>
<p>111111111111111111111111111111</p>
<p>111111111111111111111111111111</p>
<p>111111111111111111111111111111</p>
<p>111111111111111111111111111111</p>
<p>111111111111111111111111111111</p>
<p>111111111111111111111111111111</p>
<p>111111111111111111111111111111</p>
<p>111111111111111111111111111111</p>
<p>111111111111111111111111111111</p>
<p>111111111111111111111111111111</p>
<p>111111111111111111111111111111</p>
<p>111111111111111111111111111111</p>
<p>111111111111111111111111111111</p>

这是效果图

各种知名网站的导航搜索栏就是利用了粘性定位的特点，如果页面没超出窗口范围,按照relative 执行,如果内容超出窗口位置,按照fixed执行。

如果在该元素处在页面的显示页面窗口中，按照position：relative（相对定位）执行。


如果在滑动页面的时候元素即将超出页面所显示的页面窗口，则按照  position:fixed（固定定位） 执行，top为0,即一直在浏览器的顶端。

这类方式，多用来做网页导航。

以上即使定位基础的方式特点和作用。