深入浅析了解CSS中定位布局的细节
本篇文章给大家带来了css定位布局的相关知识，下面我们就来看一下什么是相对定位、绝对定位以及固定定位不同的元素性质与用途等知识，希望对大家有帮助。
1. 相对定位
1.1) 什么是相对定位
相对定位：盒子可以根据自己原来的位置进行位置调整(通过位置描述词实现)。
位置描述词：
left: 向右移动； right 向左移动；top 向下移动；bottom 向上移动
（当里面值为负数的时候，往相反方向移动）
举个例子：
原来：
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>相对定位</title>
<style>
* {
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;
}
</style></head><body>
<p>
<p></p>
</p></body></html>
将 p 设置成相对定位：
p {
width: 100px;
height: 100px;
background-color: lightblue;
position: relative;
top: 50px;
left: 50px;}
1.2）相对定位的性质与用途
性质
- 相对定位的元素，本质上仍在原来的位置，只不过在新的地方渲染出现，不会对页面其它元素产生影响。
用途
- 用来微调元素位置
- 相对定位的盒子可以用来做绝对定位的参考盒子
举个例子：
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>相对定位</title>
<style>
* {
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;
}
</style></head><body>
<nav>
<ul>
<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>
</nav></body></html>
这个时候效果是这样：
会发现鼠标悬浮在上面的时候，导航那一块区域都会下沉
我们给它设置了相对定位并微调之后：
nav ul li a:hover {
border-top: 3px solid red;
position: relative;
top: -3px;}
这样就可以解决刚刚的问题了
2. 绝对定位
2.1) 什么是绝对定位
绝对定位：盒子以坐标进行位置描述，拥有自己绝对位置。
绝对定位的参考盒子：
绝对定位的盒子会以自己的祖先元素中，离自己最近的拥有定位属性的盒子，当做基准点。
这个盒子通常是相对定位的，所以也被称作 “子绝父相”。
位置描述词：
left：到左边的距离；right：到右边的距离；top：到上边的距离；bottom：到下边的距离
举个例子：
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>绝对定位</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
position: absolute;
width: 500px;
height: 300px;
left: 200px;
top: 100px;
background-color: antiquewhite;
}
</style></head><body>
<p class="box">
</p></body></html>
2.2）绝对定位的性质与用途
绝对定位的盒子垂直居中：
.box {
position: absolute;
top: 50%;
margin-top: -自己高度一半;}
绝对定位的盒子水平居中：
.box {
position: absolute;
left: 50%;
margin-left: -自己宽度一半;}
- 堆叠顺序 z-index 属性
设置绝对定位元素的压叠顺序.
是一个没有单位的正整数，数值大的能够压住数值小的（即数值大的显示在上层）
举个例子：
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>绝对定位</title>
<style>
* {
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;
}
</style></head><body>
<p class="box1"></p>
<p class="box2"></p></body></html>
此时效果如下：
这个时候我们想让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）固定定位的性质与用途
可以用来实现一些元素要一直浮现在当前窗口前，比如浏览一个页面时的返回顶部按钮，会一直出现在当前页面的某个位置
举个例子：
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>固定定位</title>
<style>
* {
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;
}
</style></head><body>
<a class="box">^</a>
<p>
<img src="https://dummyimage.com/600x400/00bcd4/fff" alt="">
</p>
<p>
<img src="https://dummyimage.com/600x400/00bcd4/fff" alt="">
</p>
<p>
<img src="https://dummyimage.com/600x400/00bcd4/fff" alt="">
</p></body></html>
效果如下：
当页面到下方时，右下角返回顶部的按钮位置不变。
大家感兴趣的话，可以继续访问：css视频教程。
以上就是深入浅析了解CSS中定位布局的细节的详细内容！
相关内容
-
css怎么控制按钮不可用
方法：给按钮元素添加“pointer-events:none;”样式来让按钮元素永远不会成为鼠标事件的target，让其点击事件失效，即可控制按钮不可用。本教程操作环境：win...
-
css如何设置一行字显示不完隐藏
css中可利用overflow属性来设置一行字显示不完就隐藏；只需给文字的盒子元素添加“overflow:hidden;”样式，设置当内容溢出元素框时，将文字内容修剪，且溢出部...
-
CSS外链式与内联式的区别是什么
区别：CSS外链式是将css代码单独写一个以“.css”为扩展名的文件中，然后使用link标签链接到html中。CSS内联式是直接使用style属性将css代码写在HTML标签...
-
css有继承关系吗
css有继承关系。CSS继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代；也就是说：设置了上级（父级）的CSS样式，上级（父级）及以下的子级（下级...
-
浅谈使用CSS实现半透明边框和多重边框效果的方法
本篇文章分两种场景给大家介绍一下CSS实现半透明边框与多重边框效果。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。（学习视频分享：css视频教程）场景一：实现...
-
css实现领积分动画效果
最近项目中要做一个领积分的效果，根据老板的描述，这个效果类似于支付宝蚂蚁森林里的领取能量。整体效果是就是在树周围飘着几个积分元素，上下滑动，类似星星闪烁，点击领取后，沿着树中心...
-
CSS %单位的特点
CSS%单位的特点：1、百分比是一个相对长度单位，相对于父元素的尺寸；2、对于“position:absolute;”的元素是相对于已定位的父元素；3、对于“position:...
-
使用CSS实现的几种进度条
（学习视频分享：css视频教程）进度条是一个非常常见的功能，实现起来也不难，一般我们都会用div来实现。作为一个这么常见的需求，whatwg肯定是不会没有原生组件提供（虽然有我...
-
如何用css把图片弄成背景
用css把图片弄成背景的方法：首先创建一个HTML示例文件；然后在body中添加一些p标签；最后使用css中的background属性将图片设置为背景即可。本教程操作环境：Wi...
-
css里面怎么让body内容居中
css里面让body内容居中的方法：1、使用margin设置边距“0auto”让HTML页面中所有的元素水平居中；2、将div距离页面窗口左边框和上边框的距离设置为“50%”；...
