深入浅析了解CSS中定位布局的细节

本篇文章给大家带来了css定位布局的相关知识，下面我们就来看一下什么是相对定位、绝对定位以及固定定位不同的元素性质与用途等知识，希望对大家有帮助。

1.?相对定位

1.1) 什么是相对定位

相对定位：盒子可以根据自己原来的位置进行位置调整(通过位置描述词实现)。

位置描述词：


left: 向右移动； right 向左移动；top 向下移动；bottom 向上移动

（当里面值为负数的时候，往相反方向移动）

举个例子：

原来：

                    相对定位              * {             margin: 0;             padding: 0;         }          p {             width: 500px;             height: 500px;             border: 1px solid #000;             margin: 50px auto;         }          p {             width: 100px;             height: 100px;             background-color: lightblue;             position: relative;             top: 50px;             left: 50px;         }          
     
     

将 p 设置成相对定位：

p {     width: 100px;     height: 100px;     background-color: lightblue;     position: relative;     top: 50px;     left: 50px;}

1.2）相对定位的性质与用途

性质

相对定位的元素，本质上仍在原来的位置，只不过在新的地方渲染出现，不会对页面其它元素产生影响。

用途

用来微调元素位置相对定位的盒子可以用来做绝对定位的参考盒子

举个例子：

                    相对定位              * {             margin: 0;             padding: 0;         }          nav {             width: 780px;             height: 50px;             margin: 40px auto;         }          nav ul {             list-style: none;         }          nav ul li {             float: left;             width: 156px;             height: 50px;             line-height: 50px;             text-align: center;         }          nav ul li a {             display: block;             width: 156px;             height: 50px;             background-color: lightcyan;             color: #000;             text-decoration: none;         }          nav ul li a:hover {             border-top: 3px solid red;         }                   

• 导航一
• 导航二
• 导航三
• 导航四
• 导航五

这个时候效果是这样：



会发现鼠标悬浮在上面的时候，导航那一块区域都会下沉

我们给它设置了相对定位并微调之后：

nav ul li a:hover {     border-top: 3px solid red;     position: relative;     top: -3px;}

这样就可以解决刚刚的问题了

---

2.?绝对定位

2.1) 什么是绝对定位

绝对定位：盒子以坐标进行位置描述，拥有自己绝对位置。

绝对定位的参考盒子：


绝对定位的盒子会以自己的祖先元素中，离自己最近的拥有定位属性的盒子，当做基准点。

这个盒子通常是相对定位的，所以也被称作 “子绝父相”。

位置描述词：


left：到左边的距离；right：到右边的距离；top：到上边的距离；bottom：到下边的距离

举个例子：

                    绝对定位              * {             margin: 0;             padding: 0;         }          .box {             position: absolute;             width: 500px;             height: 300px;             left: 200px;             top: 100px;             background-color: antiquewhite;         }          
     

2.2）绝对定位的性质与用途

绝对定位的盒子垂直居中：

.box { position: absolute; top: 50%; margin-top: -自己高度一半;}

绝对定位的盒子水平居中：

.box { position: absolute; left: 50%; margin-left: -自己宽度一半;}

堆叠顺序 z-index 属性

设置绝对定位元素的压叠顺序.

是一个没有单位的正整数，数值大的能够压住数值小的（即数值大的显示在上层）

举个例子：

                    绝对定位              * {             margin: 0;             padding: 0;         }          .box1 {             width: 300px;             height: 300px;             position: absolute;             left: 100px;             top: 100px;             background-color: antiquewhite;         }          .box2 {             width: 300px;             height: 300px;             position: absolute;             left: 200px;             top: 200px;             background-color: lightblue;         }          
     

此时效果如下：

这个时候我们想让box1显示在上层，就设置一个z-index 属性。

.box1 {     width: 300px;     height: 300px;     position: absolute;     left: 100px;     top: 100px;     background-color: antiquewhite;     z-index: 100;}.box2 {     width: 300px;     height: 300px;     position: absolute;     left: 200px;     top: 200px;     background-color: lightblue;     z-index: 1;}

看看效果：

用途

绝对定位用来“压盖”，“遮罩”的效果

可以结合 CSS 精灵使用

可以结合 JS 实现一些动画

3.?固定定位

3.1) 什么是固定定位

固定定位：不管页面如何滚动，它永远以页面为参考点，固定在那里。

位置描述词：


left：到左边的距离；right：到右边的距离；top：到上边的距离；bottom：到下边的距离

.box { position: fixed; top: 100px; left: 100px;}

3.2）固定定位的性质与用途

可以用来实现一些元素要一直浮现在当前窗口前，比如浏览一个页面时的返回顶部按钮，会一直出现在当前页面的某个位置

举个例子：

                    固定定位              * {       活动：慈云数据爆款香港服务器，CTG+CN2高速带宽、快速稳定、平均延迟10+ms 速度快，免备案，每月仅需19元！！ 点击查看      margin: 0;             padding: 0;         }          .box {             position: fixed;             bottom: 20px;             right: 20px;             width: 40px;             height: 40px;                          text-align: center;             line-height: 40px;             border-radius: 50%;             background-color: rgba(78, 209, 226, 0.5);                          cursor: pointer;             font-size: 24px;         }          ^     
              
     
              
     
              

效果如下：

当页面到下方时，右下角返回顶部的按钮位置不变。

大家感兴趣的话，可以继续访问：css视频教程。

本文来源网站：info110.com，若侵权，请联系删除。

《深入浅析了解CSS中定位布局的细节》来自互联网同行内容，若有侵权，请联系我们删除！