CSS定位
1. 相对定位
position：relative；
相对于原来的位置进行指定的偏移，相对定位，它仍然在标准文档流中！原来的位置会被保留
top: -20px;
left:20px;
bottom:-10px;
right:20px;
<!-- 相对定位
相对于自己原来的位置进行偏移-->
<style>
div{
margin:10px;
padding:15px;
font-size: 12px;
line-height: 25px;
}
#father{
border: 1px solid #666;
padding:0;
}
#first{
background-image: linear-gradient(19deg, #21fdf6 0%, #67ff02 100%); /*渐变色背景*/
border: 1px dashed #B27530;
position:relative; /*相对定位：上下左右*/
top: -20px;
left:20px;
}
#second{
background-image: linear-gradient(19deg, #67ff02 0%, #21fdf6 100%);
border: 1px dashed #255066;
}
#third{
background-image: linear-gradient(19deg, #21fda9 20%, #ffda21 100%);
border: 1px dashed #1c6615;
position:relative;
bottom:-10px;
right:20px;
}
</style>
<body>
<div id="father">
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">第三个盒子</div>
</div>
</body>
2. 绝对定位
定位：基于xxx定位，上下左右
1、没有父级元素定位的前提下，相对于浏览器定位
2、假设父级元素存在定位，我们通常会相对于父级元素进行偏移
<style>
div{
margin:10px;
padding:15px;
font-size: 12px;
line-height: 25px;
}
#father{
border: 1px solid #666;
padding:0;
position: relative;
}
#first{
background-image: linear-gradient(19deg, #21fdf6 0%, #67ff02 100%); /*渐变色背景*/
border: 1px dashed #B27530;
}
#second{
background-image: linear-gradient(19deg, #67ff02 0%, #21fdf6 100%);
border: 1px dashed #255066;
position: absolute;
right: 30px; /*同时设定两个相对方向可实现拉伸*/
left: -10px;
}
#third{
background-image: linear-gradient(19deg, #21fda9 20%, #ffda21 100%);
border: 1px dashed #1c6615;
}
</style>
<body>
<div id="father">
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">第三个盒子</div>
</div>
</body>
3. 固定定位
<style>
body{
height: 1000px;
}
div:nth-of-type(1){ /*绝对定位：相对于浏览器*/
width: 100px;
height: 100px;
background: red;
position: absolute;
right: 0;
bottom: 0;
/*相对于浏览器打开时的位置固定，会随网页翻动而移动*/
}
div:nth-of-type(2){ /*fixed，固定定位*/
width: 50px;
height: 50px;
background: yellow;
position: fixed;
right: 0;
bottom: 0;
/*定位后任何操作都不会移动*/
}
</style>
<body>
<div>div1</div>
<div>div2</div>
</body>
4. z-index
图层
z-index：默认是0，最高无限
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style.css">
</head>
<div id="content">
<ul>
<li><img src="images/a.jpg" /></li>
<li class="tipText">好好学习，天天向上</li>
<li class="tipBg"></li>
<li>时间：2023-1-17</li>
<li>地点：月球</li>
</ul>
</div>
#content{
width: 200px;
padding: 0px;
margin: 0px;
overflow: hidden;
font-size: 12px;
line-height: 25px;
border: 1px solid black;
}
ul,li{
padding: 0;
margin: 0;
list-style: none;
}
/*父级元素相对定位*/
#content ul{
position: relative;
}
.tipText,.tipBg{
position: absolute;
width: 200px;
height: 25px;
top: 125px;
}
.tipText{
color: white;
z-index: 0;
}
/*背景透明度*/
.tipBg{
background: black;
opacity: 0.5;
filter: opacity(0.5);/*另一种写法*/
}
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义