CSS学习笔记 04、浮动与定位（下）
二、定位
2.1、相对定位
介绍相对定位
相对定位(relavtive postion)：盒子可以相对自己原来的位置进行位置调整，称为相对定位。
语法：
postion: relative
top: ??
bottom: ??
具有四个位置：left、right、top、bottom；其中的值可以为负数，即往规定方向相反移动。
性质：相对定位的元素，会在"老家留坑"，本质上仍然是在原来的位置，只不过渲染在新的地方而已，渲染的图形可以比喻成"影子"，不会对页面其他元素产生任何影响。(不脱离标准流，能够进行覆盖其他的元素)
用途：①经常用下进行微调元素位置，实际上原本的位置不会改变的，只不过效果展示的会根据指定位置调节，不会影响其他元素位置。
②相对定位的盒子，可以当做是绝对定位的参考盒子。
案例1：简单展示相对定位
添加相对定位前：
添加相对定位后：
代码如下：
<style>
* {
padding: 0px;
margin: 0px;
}
.box1 {
height: 200px;
width: 200px;
border: 1px solid #000;
margin: 0 auto;
}
.box2 {
height: 50px;
width: 50px;
background-color: red;
/* 设置相对定位(实际原来的位置部分不改变，效果进行改变) */
position: relative;
top: 55px;
left: 30px;
border-radius: 30px;
}
ul {
list-style: none;
}
li:nth-child(2) {
color: red;
}
</style>
<body>
<div class="box1">
<div class="box2">
</div>
<ul>
<li>长路</li>
<li>❤</li>
<li>林儿</li>
</ul>
</div>
</body>
案例2：实际应用到导航栏微调(hover效果微调)
实际效果展示
微调前效果：你可以看到每个链接触发时上边框就会触发并且将原本的内容顶到框外边去。
微调后效果：即在触发样式时将这个边框效果向上移边框高度，实际链接内容并没有被挤出去了
核心代码：设置hover事件的相对定位
/* 鼠标移动时触发的效果 */
div.box ul li a:hover {
background-color: #00ac97;
border-top: 5px solid gold;
/* 设置相对定位为原本位置的上面5px */
position: relative;
top: -5px;
}
源代码
<style>
* {
font-weight: bold;
color: black;
padding: 0px;
margin: 0px;
}
div {
height: 35px;
width: 720px;
margin: 20px auto;
border: 1px solid #000;
}
div.box ul {
list-style-type: none;
}
/* 设置每个li属性 */
div.box ul li {
float: left;
}
div.box ul li a {
text-decoration: none;
width: 120px;
height: 35px;
text-align: center;
line-height: 35px;
/* 将a标签设置为块元素，此时才能够作用到整个宽高 */
display: block;
}
/* 鼠标移动时触发的效果 */
div.box ul li a:hover {
background-color: #00ac97;
border-top: 5px solid gold;
/* 设置相对定位为原本位置的上面5px */
position: relative;
top: -5px;
}
</style>
<body>
<div class="box">
<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>
<li><a href="#">校园生活</a></li>
</ul>
</div>
</body>
2.2、绝对定位
介绍绝对定位
绝对定位：盒子可以在浏览器中以坐标进行位置精准描述，拥有自己的绝对位置。
位置描述：left、top、right、bottom。
重点：绝对定位脱离标准文档流。意味它将释放自己的位置，对其他元素不会产生任何的干扰，而是对他们进行压盖。
绝对定位的参考盒子：绝对定位的盒子并不是永远以浏览器作为基准点，绝对定位的盒子会以自己祖先元素中，离自己最近的拥有定位属性的盒子当做基准点。这个盒子通常是相对定位的，所以这个性质也叫做"子绝父相"。
用途：用来制作"压盖"、“遮罩的效果”，可以用来结合css精灵来使用，并且能够结合js来实现动画。
案例1：绝对定位示例
两个重点：
- 绝对定位的盒子会以自己祖先元素中，离自己最近的拥有定位属性的盒子当做基准点。(关键点是祖先节点)
- 脱离文档流，进行绝对定位之后不会对其他元素造成影响。
祖先节点无定位属性情况
若是祖先节点中无任何节点有定位属性，就会依据body整个页面来进行绝对定位。
祖先节点有定位属性情况
设置绝对定位的属性永远会跟着祖先节点中的定位属性来移动位置：
源码：
<style>
* {
padding: 0px;
margin: 0px;
}
/* 这三个祖先盒子都能够来进行设置定位属性来测试，一般定位属性设置为relative */
div.box1 {
width: 600px;
height: 600px;
border: 1px solid #000;
margin: 20px auto;
position: relative;
}
div.box2 {
width: 450px;
height: 450px;
border: 1px solid #000;
margin: 75px 75px;
}
div.box3 {
width: 200px;
height: 200px;
border: 1px solid #000;
margin: 125px 125px;
}
p {
width: 50px;
height: 50px;
background-color: orange;
/* 设置绝对定位 */
position: absolute;
top: 0;
left: 0;
}
</style>
<body>
<div class="box1">
<div class="box2">
<div class="box3">
<p></p>
</div>
</div>
</div>
</body>
案例2：绝对定位实现水平垂直居中
绝对定位来达到垂直居中是一个非常使用的技术
position: absolute
top: 50%
margin-top: -自己高度的一半
说明：top50%我们知道就是占父盒子的50%高度嘛，那这个margin-top为什么是负的自己高度一半，看下面例子：
此时我们将margin-top添上：
垂直居中效果：
既然垂直居中做到了，那么水平居中也就很容易了一样的方法，下面给出水平垂直的核心代码：
div.box1 {
width: 200px;
height: 200px;
border: 1px solid #000;
margin: 20px auto;
/* 1、设置定位属性(作为绝对定位的基准点) */
position: relative;
}
div.box2 {
width: 50px;
height: 50px;
background-color: red;
/* 2、设置绝对定位 */
position: absolute;
/* 垂直居中 */
top: 50%;
margin-top: -25px;
/* 水平居中 */
left: 50%;
margin-left: -25px;
}
堆叠顺序index属性
z-index属性：是一个没有单位的正整数，数值大的能够压住数值小的。
两种方式来修改堆叠顺序
①不设置z-index属性会依据写标签的顺序来进行压盖。
两个div盒子都设置绝对定位时，会脱离文档流，后写的盒子就会压盖主前面的div盒子，依照标签顺序。若是想蓝色盒子被红色盒子压盖只需要先写蓝色盒子标签后写红色盒子标签即可。
<style>
* {
padding: 0px;
margin: 0px;
}
div.box1 {
width: 200px;
height: 200px;
border: 1px solid #000;
background-color: red;
/* 设置绝对定位 */
position: absolute;
top: 150px;
left: 150px;
}
div.box2 {
width: 200px;
height: 200px;
border: 1px solid #000;
background-color: blue;
/* 设置绝对定位 */
position: absolute;
top: 200px;
left: 200px;
}
</style>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
②一般来设置999或者9999，后面的大于前面的
使用z-index属性即可实现压盖效果，想要实现红色盒子压盖蓝色盒子呢？在上面的设置z-index更大即可
效果：
案例3：轮播图实际案例(使用绝对定位)
案例说明：通过使用绝对定位来实现的左右按钮的位置以及下面的小按钮组中四个小按钮的实现，并且能够触碰时有黄色效果
结构如下：
<body>
<div class="sideshow">
<img src="./123456.jpg" alt="">
<a href="#" class="rightbtn btn">></a>
<a href="#" class="leftbtn btn"><</a>
<div class="points">
<ul>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</div>
</div>
</body>
分析：
div.sideshow：设置相对定位，来为下面的a、按钮组来作为基准点
img：展示的图片。a：使用绝对定位，相对靠左。a：使用绝对定位，相对靠右div.points：使用绝对定位，实现在图片的底部中央。
说明：对于左右按钮，在前端中实际也可以进行抽离重复的部分如btn样式，在这个样式中定义了高宽，绝对定位，背景颜色，圆框这类重复的元素，通过rightbtn，leftbtn样式可以设置绝对定位的左右位置。
小提示(tips)：
- 实际开发中不建议去掉href属性，而是建议设置href="#"或者设置href=“javascript:;”，禁止链接刷新或跳转。
- 设置绝对定位是可以设置宽度与高度的。(可以将其看做是块元素进行设置宽高以及位置)。
css源代码：
<style>
* {
padding: 0px;
margin: 0px;
}
/* 外部图片居中 */
div.sideshow {
width: 550px;
/* 高度溢出 */
overflow: hidden;
margin: 0 auto;
/* 设置相对定位：作为绝对定位的基础点 */
position: relative;
}
/* 设置图片大小 */
img {
width: 550px;
height: 300px;
}
/* 去除掉超链接的下划线 */
div.sideshow a {
text-decoration: none;
}
/* 两个按钮的css样式 */
/* 设置按钮 */
.btn {
/* 绝对定位能够设置宽高 */
position: absolute;
width: 30px;
height: 30px;
background-color: rgb(255, 255, 255, .5);
border-radius: 15px;
text-align: center;
line-height: 30px;
}
/* 左按钮 */
.leftbtn {
left: 10px;
/* 垂直居中 */
top: 50%;
margin-top: -15px;
}
/* 右按钮 */
.rightbtn {
right: 10px;
/* 垂直居中 */
top: 50%;
margin-top: -15px;
}
/* 小圆点的css样式 */
/* 小圆点按钮组 */
div.sideshow div.points {
width: 90px;
height: 15px;
/* background-color: gold; */
/* 绝对定位：设置底部20px，垂直居中 */
position: absolute;
bottom: 20px;
left: 50%;
margin-left: -45px;
/* border: 1px solid #000; */
}
/* 去除掉ul列表的样式 */
div.sideshow div.points ul {
list-style: none;
text-align: center;
}
/* 设置li的属性 */
div.sideshow div.points ul li a {
/* 左悬浮 */
float: left;
width: 15px;
height: 15px;
border-radius: 12.5px;
background-color: rgb(255, 255, 255, .5);
line-height: 25px;
margin-right: 10px;
}
/* 最后一个小圆点的右外边距为0px */
div.sideshow div.points ul li:nth-child(4) a {
margin-right: 0px;
}
/* 设置小圆点触碰时为黄色 */
div.sideshow div.points ul li a:hover {
background-color: gold;
}
/* 默认第2个小圆点是黄色 */
div.sideshow div.points ul li:nth-child(2) a {
background-color: gold;
}
</style>
2.3、固定定位
介绍
含义：不管页面如何卷动，它永远固定在那里。永远以浏览器为参考固定在那里。
语法：postion:fixed
注意点：固定定位只能以页面为参考点，没有子固父相这个性质，固定定位脱离标准文档流。
用途：返回顶部，楼层导航。
示例
可以看到无论你屏幕如何滚动，右下角的盒子都不会移动，一直固定着。
源码：
<style>
* {
padding: 0px;
margin: 0px;
}
img {
width: 800px;
height: 400px;
}
/* 盒子进行固定定位 */
.box {
height: 100px;
width: 100px;
position: fixed;
bottom: 30px;
right: 30px;
background-color: orange;
}
</style>
<body>
<img src="./123456.jpg" alt="">
<img src="./123456.jpg" alt="">
<img src="./123456.jpg" alt="">
<img src="./123456.jpg" alt="">
<img src="./123456.jpg" alt="">
<img src="./123456.jpg" alt="">
<img src="./123456.jpg" alt="">
<img src="./123456.jpg" alt="">
<img src="./123456.jpg" alt="">
<div class="box">
</div>
</body>
脱离文档流的三种方法
脱离文档流概念：意味它将释放自己的位置，对其他元素不会产生任何的干扰，而是对他们进行压盖。
浮动、绝对定位与固定定位
- 点赞
- 收藏
- 关注作者
评论（0）