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、宽高、浮动、定位等）>盒模型属性>背景属性>文字属性

定位

position

偏移量属性

relstive(相对定位)

absolute(绝对定位)

fixed（固定定位）

相关推荐