本文介绍定位和CSS中的修饰属性。
目录
1. 定位
1.1 相对定位
1.2 绝对定位
1.3 定位居中
1.4 固定定位
1.5 z-index堆叠层级
2. 修饰属性
2.1 垂直对齐方式 vertical-align
2.2 过渡属性
2.3 透明度 opacity
2.4 光标类型 cursor
1. 定位
灵活改变盒子在网页中的位置
实现：
position
加上边偏移属性：top bottom left right
1.1 相对定位
position:relative
一般和其他定位相互配合使用
1.2 绝对定位
position:absolute
子级绝对定位，父级相对定位
（子级无论怎么改变都会出现在父级区域的里面）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img {
width: 400px;
}
.news {
/* 父级相对 */
position: relative;
/* 版心 */
margin: 100px auto;
width: 400px;
height: 350px;
background-color: #f8f8f8;
}
/*
1.绝对定位 脱标 不占位
2.绝对定位参照物：先找最近的已经定位的祖先元素，如果没有祖先元素，就参照浏览器可视区改位置
3.显示模式改变：宽高生效（具备了行内块）
*/
.news span {
/* 子级绝对 */
position: absolute;
/* 边偏移属性改变位置 */
/* 要去右上角 */
right: 0;
top: 0;
/* span原来是行内，display转为块级 */
display: block;
width: 92px;
height: 32px;
background-color: rgba(0, 0, 0, 0.6);
text-align: center;
line-height: 32px;
color: #fff;
}
</style>
</head>
<body>
<div class="news">
<img src="./5.webp" alt="">
<span>展会活动</span>
<h4>2222世界移动大会</h4>
</div>
</body>
</html>
1.3 定位居中
在浏览器窗口中实现定位居中
实现步骤：
1. 绝对定位
2. 水平、垂直边偏移为50%
3. 子级向左、上移动自身尺寸的一半（也可以transform:translate(-50%,-50%)）
<style>
img {
/* 子级绝对 */
position: absolute;
/* 右移、下移浏览器页面的一半 */
left: 50%;
top: 50%;
/* 左移自身图片宽度的一半 我的图片宽度是810，所以左移405px */
margin-left: -405px;
/* 上移同理 */
margin-top: -540px;
}
</style>
</head>
<body>
<img src="./5.webp" alt="">
</body>
第二种写法：
<style>
img {
/* 子级绝对 */
position: absolute;
/* 右移、下移浏览器页面的一半 */
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
</style>1.4 固定定位
position:fixed
在页面中无论怎么滑动，都不会动位置
<style>
* {
margin: 0;
padding: 0;
}
img {
width: 200px;
height: 200px;
}
/*
固定定位：
1. 脱标 不占位
2. 参照物：浏览器窗口
3. 行内块特点
*/
div {
position: fixed;
/* 浏览器窗口的最顶部 */
top: 0;
/* 浏览器窗口的最右部 */
right: 0;
/* 加个宽度，看是否发生变化 */
width: 500px;
}
</style>
可以看到滑动页面时他的位置也不变
1.5 z-index堆叠层级
默认效果：按照标签书写顺序，后来者居上，后写的压在前一个上面
作用：设置定位元素的层级顺序，改变定位元素的显示顺序
如图效果：
下面代码演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
position: absolute;
/* 定位后，后来者居上 */
width: 200px;
height: 200px;
}
.box1 {
background-color: pink;
/* z-index取值是整数，默认是0，取值越大显示顺序越靠上 */
z-index: 1;
}
.box2 {
background-color: skyblue;
/* 加边偏移，明显看到堆叠效果 */
left: 100px;
top: 100px;
/* z-index取值比box1大才能压在他上面 */
z-index: 2;
}
</style>
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
</body>
</html>
2. 修饰属性
2.1 垂直对齐方式 vertical-align
属性名：vertical-align
属性值：
baseline 基线对齐(默认)
top 顶部对齐
middle 居中对齐
bottom 底部对齐
什么是基线，为什么头像和昵称不能同行？
原因：将图片也当成文字处理，都在同一基线对齐
<style>
div {
border: 1px solid #000;
}
img {
width: 200px;
height: 200px;
/* 谁占的块大，给谁加 */
/* 1. middle文字和图片对齐居中 */
vertical-align: middle;
/* 2. top顶对齐 */
/* vertical-align: top; */
/* 3.bottom底部对齐 */
/* vertical-align: bottom; */
}
</style>
</head>
<body>
<div>
<!-- 默认：图片和文字，一个偏上一个偏下 -->
<img src="./5.webp" alt="">
我是谁？我在哪？
</div>
</body>居中：
还有一种方法：直接取消底下的空白
转换为块级即可，让浏览器认为这是块，就不当成文字和其他文字一行了
img {
width: 200px;
height: 200px;
display:block;
}2.2 过渡属性
transition
可以为一个元素在不同状态之间切换的时候添加过渡效果（如大小变化）
属性名：transition 复合属性
属性值：过渡的属性 花费时间 秒s
写法：
1. 可以是具体的CSS属性
2. 也可以为 all（两个状态属性值不同的所有属性，都产生过渡效果）
3. transition 设置给元素本身
<style>
/* 默认 */
img {
width: 200px;
height: 150px;
/* 属性值不同的都变化 时间1s */
/* 加给标签本身 */
transition: all 1s;
}
/* 鼠标滑动到图片时 */
img:hover {
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<img src="./5.webp" alt="">
</body>2.3 透明度 opacity
设置整个元素的透明度 (包含背景和内容)
属性名：opacity
属性值：0-1
0：完全透明（元素不可见）
1：不透明
0-1小数：半透明
2.4 光标类型 cursor
鼠标悬停在元素上时显示指针显示样式
属性名：cursor
属性值：
default 默认值 通常是箭头
pointer 小手效果 提示用户可以点击
text 工字型 提示用户可以选择文字
move 十字光标 提示用户可以移动
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
/* cursor:pointer; 小手 */
cursor:pointer;
/* 工字型 可以选择文本的 */
cursor: text;
/* 可以移动 */
cursor: move;
}
</style>
</head>
<body>
<div></div>本文介绍定位和CSS中的修饰属性。
