CSS定位

一. 什么是css定位？

在制作网页时，css可以通过定位属性将一个元素精准的放在页面上指定位置。css定位对与css浮动在控制网页布局的操作更加灵活。

	定位属性：position   用来定义元素的定位模式：共有五种属性值。
	1：static 静态定位—— 默认值，文本流状态，不识别left、right、top、bottom指定的坐标。（忽略）
	2：absolute 绝对定位——没有父元素或者父元素没有定位，以整个文档为参照物进行定位，脱离文本流，不占据空间。
	3：relative 相对定位——对自身文档流位置进行定位，不破坏文档流，始终占据空间。
	4：fixed 固定定位——对浏览器窗口进行定位，脱离文档流，不占据空间。
	5：sticky 粘性定位——relative和fixed结合。然后页面没有超出窗口范围按照relative执行，如果超出按照fixed执行。

在css中，确定了定位属性后，通过位置属性（top、bottom、left、right）来精准定位元素位置，取值可以为数值或百分比。

	top：顶部向下偏移
	bottom：底部向上偏移
	left：左侧向右偏移
	right：右侧向左偏移

二. css定位怎么使用

relative 相对定位

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

html代码

 <div class="box">
        <div class="box1">box1</div>
        <div class="box2">box2</div>
        <div class="box3">box3</div>
    </div>

css代码

  .box{
            width:400px;
            height:300px;
            border: 3px solid red;
   
        }
        .box1{
            width:100px;
            height:100px;
            background:rgb(118, 226, 154);
        }
        .box2{
            width:150px;
            height:150px;
            background:rgb(92, 219, 241);
           
        }
        .box3{ 
            width:50px;
            height:50px;
            background:rgb(92, 119, 241);
        }

定位前效果图

通过对子元素进行相对定位
代码如下

 .box{
            width:400px;
            height:300px;
            border: 3px solid red;
        }
        .box1{
            width:100px;
            height:100px;
            background:rgb(118, 226, 154);
        }
        .box2{
            width:150px;
            height:150px;
            background:rgb(92, 219, 241);
            position: relative;
            left: 100px;
            top: -100px;
        }
        .box3{ 
            width:50px;
            height:50px;
            background:rgb(92, 119, 241);
        }

效果图：通过自身默认的位置进行定位，box3还在原来的位置，因此relative定位 始终占据空间，不会破坏文档流

absolute：绝对定位

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

html代码

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

css代码

 .box{
            width:600px;
            height:500px;
        }
        .box1{
            width:150px;
            height:100px;
            background:rgb(118, 226, 154);
         
        }
        .box2{
            width:200px;
            height:200px;
            background:rgb(92, 219, 241);
           
        }

定位前效果图

通过对子元素进行绝对定位 父元素进行相对定位
代码如下

 .box{
            width:400px;
            height:300px;
            border: 3px solid red;
            position:relative; /* 形成参照物 */
        }
        .box1{
            width:100px;
            height:100px;
            background:rgb(118, 226, 154);
         
        }
        .box2{
            width:150px;
            height:150px;
            background:rgb(92, 219, 241);
            position:absolute; /* 设置绝对定位 */
            right: 0;
            bottom: 0;
        }

效果图：以父元素为参照物进行定位。 right: 0;bottom: 0;表示离父元素右侧0像素，底部0像素。

假设1 当前没有父元素 或者 父元素没有定位的情况下，以整个文档为参照物。

 .box{
            width:400px;
            height:300px;
            border: 3px solid red;
        }
        .box1{
            width:100px;
            height:100px;
            background:rgb(118, 226, 154);
        }
        .box2{
            width:150px;
            height:150px;
            background:rgb(92, 219, 241);
            position:absolute; /* 设置绝对定位 */
            right: 0; 
            bottom: 0;
        }

效果图：当父元素没有参照物时子元素以浏览器为参照物。定位在浏览器右下角

绝对定位，脱离文档流、不占据空间

html代码

<div class="box">
        <div class="box1">box1</div>
        <div class="box2">box2</div>
        <div class="box3">box3</div>
    </div>

css代码

 .box{
            width:400px;
            height:300px;
            border: 3px solid red;
            position: relative;
        }
        .box1{
            width:100px;
            height:100px;
            background:rgb(118, 226, 154);
        }
        .box2{
            width:150px;
            height:150px;
            background:rgb(92, 219, 241);
            position:absolute; /* 设置绝对定位 */
            right: 0; 
            bottom: 0;
           
        }
        .box3{ 
            width:50px;
            height:50px;
            background:rgb(92, 119, 241);
        }

效果图：当子元素发生绝对定位时，脱离了原本的位置，不占据空间。box3向上移

fixed 固定定位

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

html代码

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

css代码

  .box{
            width:400px;
            height:300px;
            border: 3px solid red;
   
        }
        .box1{
            width:100px;
            height:100px;
            background:rgb(118, 226, 154);
        }
        .box2{
            width:150px;
            height:150px;
            background:rgb(92, 219, 241);
           
        }

定位前效果图

通过对子元素进行固定定位
代码如下

 .box{
            width:400px;
            height:300px;
            border: 3px solid red;
        }
        .box1{
            width:100px;
            height:100px;
            background:rgb(118, 226, 154);
        }
        .box2{
            width:150px;
            height:150px;
            background:rgb(92, 219, 241);
            position: fixed;
            left: 400px;
            top: 0;
        }

效果图：子元素以整个浏览器为参照物进行定位，子元素始终固定在当前位置。