CSS定位

定位

是布局中的重要属性，一般用于盖压效果与位置相关效果。

position

给元素设置整体定位，必须同时存在position属性和偏移量属性。

属性值	说明
relative	相对定位
absolute	绝对定位
fixed	固定定位

偏移量属性

定位的元素，在水平或垂直方向需要偏移的距离。

• 水平：left、right
• 垂直：top、bottom

relstive(相对定位)

参考这个元素原始应该加载的位置。
相对定位没有脱离原始状态（标准流，浮动），它不会让出原来占有的位置，显示效果上，形影分离。

注意：

• 偏移量区分正负（正数便宜方向和属性名相反，负数则反之）
• 水平和垂直方向上只能设置一个属性，若同时存在，则水平上以left为准，垂直上以top为准
• 相对定位参考自身位置，+left=-right，+top=-bottom

实际应用：

• 相对定位比较稳定，可以把相对定位作为绝对定位的参考元素
• 可以在占有原始位置的情况下，对加载效果区进行位置、文字的微调

案例：

	/*实现导航栏鼠标移上后上方出现一个方框*/
	*{
           margin: 0;
           padding: 0;
       }
       .nav{
           height: 50px;
           width: 1080px;
           background: #9acfea;
           margin: 100px auto;
       }
       .nav li{
           list-style: none;
           float: left;
           width: 216px;
           height: 50px;
       }
       .nav li a{
           text-decoration: none;
           display: block;
           height: 50px;
           text-align: center;
           line-height: 50px;
           border-right: 2px solid #fff;
           color: #fff;
       }
       .nav li a:hover{
           position: relative;
           top: -4px;
           border-top: 4px solid #5bc0de;
           background: #2aabd2;
       }

		<ul class="nav">
            <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>

absolute(绝对定位)

参考距离最近的有定位的祖先元素，若没有则参考body，必须搭配偏移量才能使用
绝对定位脱离了标准流，让出原始位置，可设置宽高、随时定义位置，不设置高度只能被撑开
注意：

• 参考元素不固定，不同的参考元素和偏移值会有不同的表现效果
• 和相对定位不同，四个方向偏移量不再有关系，无法等价互换

参考点：

• 有top参与：参考点就是body或盒子的左上或者右上顶点
• 有bottom参与：参考点就是body或者盒子的左下或者右下顶点

实际工作不会以body作为参考元素

祖先级参考元素：

• 祖先级有定位属性：寻找最近含有定位属性的祖先元素
• 祖先元素设置了相对、绝对、固定定位：都可以当作子元素绝对定位的参考元素，一般使用子绝父相

祖先元素参考点：
如果绝对定位参考元素是祖先级元素，参考点就是祖先盒子border的四个顶点，组合方式决定了参考点，绝对定位之关系子盒子和父盒子之间的距离，忽略padding区域。

偏移属性值	参考点	对比点
left、top	祖先元素的左上角（内容区域+padding）	盒子自身左上角（包含margin）
left、bottom	祖先元素的左下角（内容区域+padding）	盒子自身左下角（包含margin）
right、top	祖先元素的右上角（内容区域+padding）	盒子自身右上角（包含margin）
right、bottom	祖先元素的右下角（内容区域+padding）	盒子自身右下角（包含margin）

案例：

	 /* 如果box1、2、3都没设置position那么就以body为参考元素
        */
        .box1 {
            width: 500px;
            height: 500px;
            border: 10px solid red;
            margin: 100px;
            position: relative;  /* 只要有我在，上边设置了position也没用，也要以我为参考元素 */
        }
        .box2 {
            width: 400px;
            height: 400px;
            border: 10px solid green;
            margin: 40px;
            position: absolute;  /* 只要有我在，上边设置了position也没用，也要以我为参考元素 */
        }
        .box3 {
            width: 300px;
            height: 300px;
            border: 10px solid blue;
            margin: 40px;
            position: fixed;  /* 只要有我在，上边设置了position也没用，也要以我为参考元素 */
        }
        .me {
            width: 50px;
            height: 50px;
            border: 10px solid yellow;
            margin: 10px;
            background: #cccccc;
            position: absolute;  /* 设置绝对定位和偏移量 */
            top: 0;
            left: 0;
        }
        
        <div class="box1">
		    <div class="box2">
		        <div class="box3">
		            <div class="me"></div>
		        </div>
		    </div>
		</div>

fixed（固定定位）

参考元素只能根据浏览器窗口四个顶点，位置根据偏移量决定，不随屏幕滚动
脱离标准流，可设置宽高、位置，参考元素是浏览器窗口，始终显示在窗口固定位置

 .box {
            width: 300px;
            height: 300px;
            margin: 20px;
            background: #cccccc;
        }
        .txt{
            /* 设置固定定位和偏移量 */
            position: fixed;
            right: 20px;
            bottom: 20px;
            border: 2px solid #9acfea ;
            background: #2aabd2;
            width: 100px;
            height: 100px;
            line-height: 100px;
            text-align: center;
        }
        
        <div class="txt">我是固定的</div>
		<div class="box"></div>
		<div class="box"></div>
		<div class="box"></div>
		<div class="box"></div>

定位属性的应用：

CSS书写顺序（推荐）：结构（display、宽高、浮动、定位等）>盒模型属性>背景属性>文字属性