目录
top与bottom及left与right同时设置,调节宽高
定位
属性值 | 描述 |
---|---|
static | 没有定位,元素出现在正常的流中(默认值) |
relative | 相对定位,相对于自身正常位置进行位置的调整 |
absolute | 绝对定位,相对于其最近的定位的父元素定位,进行位置调整 |
fixed | 固定定位 相对于浏览器窗口进行位置调整 |
sticky | 粘性定位 基于用户的滚动位置进行定位 |
相对定位
盒子可以“相对自己原来的位置”进行位置调整,称之为“相对定位”
- 给需要添加相对定位的元素,加上“position:relative;”
- 元素的位置通过:“left”、“top”、“right”、“bottom”属性进行调整
- 属性值可以是正数,也可以是负数
定位的位置属性 描述 top 向下移动 bottom 向上移动 left 向右移动 right 向左移动 值为负数 往规定方向移动
相对定位的特点
- 相对定位的元素,会在“老家留坑”,本质上仍然是在原来的位置,即:“元素的初始位置占据的空间会被保留”
- 只不过渲染在新的地方而已,渲染的图形可以比喻成影子,不会对其他页面元素产生任何影响
相对定位前后对比
<style type="text/css">
.box {
width: 100px;
height: 100px;
background-color: skyblue;
float: left;
}
.box2 {
background-color: pink;
}
.box2 {
/* 相对定位 */
position: relative;
/* 右偏移 20px */
left: 20px;
/* 下偏移20px */
top: 20px;
}
</style>
<body>
<div class="box box1">box1</div>
<div class="box box2">box2</div>
<div class="box box3">box3</div>
</body>
效果:
未设置相对定位前效果 | 设置相对定位后效果 |
---|---|
![]() | ![]() |
绝对定位的应用场景
1.鼠标滑动到元素,元素少量位置偏移动画
<style>
ul {
list-style: none;
padding: 0;
margin: 0;
width: 480px;
margin: 150px auto;
}
ul li {
width: 100px;
height: 120px;
background-color: pink;
margin: 0px 10px;
float: left;
}
/*
鼠标滑动到li上,li设置为相对定位
然后相对自身向上偏移10px
向右偏移2px
*/
ul li:hover {
position: relative;
top: -10px;
left: 2px;
}
</style>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</body>
效果:
2.网站导航
<style>
body,
ul,
li {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #fff;
}
ul {
height: 50px;
margin-top: 50px;
list-style: none;
background-color: skyblue;
}
ul li {
float: left;
line-height: 50px;
}
ul li a {
display: inline-block;
padding: 0px 20px;
height: 50px;
}
ul li a:hover {
/* 相对定位,用来微调元素的位置 */
position: relative;
top: -5px;
height: 60px;
line-height: 60px;
background-color: rgb(24, 181, 243);
}
</style>
<body>
<ul class="menu">
<li><a href="#">首页</a></li>
<li><a href="#">信息</a></li>
<li><a href="#">前端</a></li>
<li><a href="#">Java架构师</a></li>
<li><a href="#">实战</a></li>
<li><a href="#">我们</a></li>
</ul>
</body>
效果:
绝对定位
盒子可以在浏览器中以坐标进行位置精准描述,拥有自己的绝对位置
- 给需要添加绝对位置的元素,加上:“position:absolute;”
- 元素的位置通过:“left”、“top”、“right”、“bottom”属性进行调整位置
- 属性值可以使正数,也可以是负数
定位的位置属性 描述 top 到上边的距离
bottom 到下边的距离 left 到左边的距离 right 到右边的距离
/* 在不设置相对于谁定位时,默认相对浏览器的(0,0)坐标进行绝对定位 */
position: absolute;
top: 100px;
left: 100px;
绝对定位元素的8大特性
- 绝对定位的元素,相对离自己最近的最近的定位父元素进行位置调整
- 如果没有定位的父元素,则相对body进行位置调整
- 元素完全脱离文档流,释放其原本所占据的空间
- 元素的层级提升,会覆盖在其它元素上
- 行内元素加上定位后吗,会具有行内块元素特性,支持宽高设置
- margin:auto;居中失效
- 定位元素未设置宽高情况下,同时设置top和bottom会改变元素高,同时设置left和right会改变元素宽
- 在元素调整宽高情况下,同时设置top与bottom,会与top值为主,bottom不生效,同时设置left和right则以left为主,right不生效
绝对定位脱离标准的文档流
- 绝对定位的元素脱离标准文档流,将释放自己的位置,对其他元素不会产生任何干扰,而是对他们进行压盖
- 脱离标注文档流的方法:“浮动”、“绝对定位”、“固定定位”
- 使用绝对定位的元素将会是一种漂浮状态
<style>
.box1 {
width: 200px;
height: 200px;
background-color: orange;
}
.box2 {
width: 200px;
height: 200px;
background-color: skyblue;
/* 绝对定位 */
position: absolute;
top: 200px;
left: 300px;
}
.box3 {
width: 200px;
height: 200px;
background-color: tomato;
}
</style>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
效果:
脱离文档流,层级提升
<style>
.container {
width: 300px;
height: 100px;
border: 2px solid red;
margin: 100px auto;
/* 相对定位,是.box2绝对定位的参考对象 */
position: relative;
}
.box {
width: 100px;
height: 100px;
background-color: skyblue;
float: left;
}
.box3 {
background-color: khaki;
}
.box2 {
background-color: pink;
/* 绝对定位 */
position: absolute;
/* 与.container元素左边距离为 10px */
left: 10px;
/* 与.container元素上边距离50px */
top: 50px;
}
</style>
<body>
<div class="container">
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
</div>
</body>
.box2未绝对定位前效果 | .box2绝对定位后效果 |
---|---|
![]() | ![]() |
相对于其最近的定位的父元素进行定位
父元素未定位,祖先元素定位绝对定位相对于定位的祖先元素定位
<style>
.container {
width: 200px;
height: 200px;
border: 2px solid red;
margin: 100px auto;
/* 相对定位,是.box2绝对定位的参考对象 */
position: relative;
}
.box {
width: 100px;
height: 100px;
background-color: skyblue;
margin-top: 100px;
}
.item {
width: 50px;
height: 50px;
background-color: pink;
/* 绝对定位 */
position: absolute;
/* 与.container元素左边距离为 10px */
left: 10px;
/* 与.container元素上边距离50px */
top: 10px;
}
</style>
<body>
<div class="container">
<div class="box">
<div class="item"></div>
</div>
</div>
</body>
.item未使用绝对定位前效果 | .item使用绝对定位后效果 |
---|---|
![]() | ![]() |
父元素及其祖先元素都未定位,则相对于body定位
<style>
.container {
width: 200px;
height: 200px;
border: 2px solid red;
margin: 100px auto;
}
.box {
width: 100px;
height: 100px;
background-color: skyblue;
margin-top: 100px;
}
.item {
width: 50px;
height: 50px;
background-color: pink;
/* 绝对定位 其父元素和祖先元素都未设置定位,则其相对body定位 */
position: absolute;
/* 与body左边距离为 10px */
left: 10px;
/* 与body上边距离10px */
top: 10px;
}
</style>
<body>
<div class="container">
<div class="box">
<div class="item"></div>
</div>
</div>
</body>
.item未使用定位前效果 | .item使用绝对定位后效果 |
---|---|
![]() | ![]() |
行内元素绝对定位后,具有行内块元素特性
<style>
span {
/* 行内元素加上绝对定位后,支持宽高设置 */
width: 200px;
height: 100px;
background-color: red;
/* 绝对定位 */
position: absolute;
/* 上偏移50px */
top: 50px;
/* 左偏移 */
left: 50px;
}
</style>
<body>
<span></span>
</body>
效果:
margin:0 auto水平居中失效
<style>
.box {
width: 200px;
height: 200px;
background-color: skyblue;
}
.item {
width: 100px;
height: 100px;
background-color: khaki;
/* 元素绝对定位 */
position: absolute;
/* 元素绝对定位后,margin:0 auto;水平居中失效 */
margin: 0 auto;
}
</style>
<body>
<div class="box">
<div class="item"></div>
</div>
</body>
效果:
top与bottom及left与right同时设置,调节宽高
<style>
.box {
width: 200px;
height: 200px;
background-color: skyblue;
/* 相对定位 */
position: relative;
}
.item {
background-color: khaki;
/* 元素绝对定位 */
position: absolute;
/*
通过以下值,元素会被自动拉宽和拉高,
与相对定位元素上下 左右 10px间距
*/
top: 10px;
bottom: 10px;
left: 10px;
right: 10px;
}
</style>
<body>
<div class="box">
<div class="item"></div>
</div>
</body>
效果:
top与bottom及left与right的优先级
<style>
.box {
width: 200px;
height: 200px;
background-color: skyblue;
/* 相对定位 */
position: relative;
}
.item {
width: 50px;
height: 50px;
background-color: khaki;
/* 元素绝对定位 */
position: absolute;
/*
通过以下值,元素会被自动拉宽和拉高,
与相对定位元素上下 左右 5px间距
*/
top: 50px;
bottom: 10px;
left: 50px;
right: 10px;
}
</style>
<body>
<div class="box">
<div class="item"></div>
</div>
</body>
效果:
绝对定位的盒子垂直水平居中
- 绝对定位的盒子垂直居中是一个非常实用的技术
/* 垂直居中 */
position: absolute;
top: 50%;
margin-top: -自己高度一半;
/* 水平居中 */
position: absolute;
left: 50%;
margin-left: -自己宽度一半;
绝对定位的应用
绝对定位实现黑色半透明遮罩层
<!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>
.container{
width: 150px;
height: 200px;
margin: 100px auto;
position: relative;
}
.container img {
width: 150px;
height: 200px;
}
.container::before {
display: none;
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);;
}
.container .play-layer {
position: absolute;
display: block;
width: 80px;
height: 80px;
background: url("/static/play.png") no-repeat center;
background-size: cover;
top: 50px;
left: 40px;
display: none;
}
.container:hover::before {
display: block;
}
.container:hover .play-layer{
display: block;
}
</style>
</head>
<body>
<div class="container">
<img src="/static/jjy.png" alt="">
<span class="play-layer"></span>
</div>
</body>
</html>
效果:
绝对定位实现带三角形的会话框
<!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>
.container {
position: relative;
width: 150px;
height: 200px;
margin: 100px auto;
}
.container img {
width: 150px;
height: 200px;
}
.text {
position: absolute;
width: 200px;
height: 100px;
background-color: skyblue;
left: 180px;
top: 50px;
border-radius: 20px;
text-align: center;
line-height: 100px;
display: none;
}
.text::before {
display: block;
position: absolute;
content: "";
width: 0px;
border: 20px solid transparent;
border-right-color: skyblue;
left: -40px;
top: 25px;
}
.container:hover .text{
display: block;
}
</style>
</head>
<body>
<div class="container">
<img src="/static/jjy.png" alt="">
<div class="text">大家好,我是鞠婧祎~</div>
</div>
</body>
</html>
效果:
固定定位
- 给需要添加固定定位的元素,加上“position:fixed;”
- 元素的位置通过:“left”、“top”、“right”、“bottom”属性进行调整,属性可以是正数也可以是负数
position: fixed;
top: 100px;
left: 100px;
注:
- 固定定位只能以整个页面为参考点(浏览器窗口)
- 固定定位托定标准文档流
- 除其位置是相对于浏览器窗口而言外,其它与绝对定位的特性一致
<style>
body {
height: 2000px;
}
.item {
width: 200px;
height: 200px;
background-color: pink;
/* 固定定位 */
position: fixed;
/* 与浏览器顶部100px */
top: 100px;
/* 与浏览器右边10px */
right: 10px;
}
</style>
<body>
<div class="item"></div>
</body>
固定定位应用场景
固定定位实现返回顶部
<style>
body {
/* 为演示有滚动条的效果,给body设置高度 */
height: 2000px;
}
.top {
display: block;
width: 60px;
height: 50px;
background-color: rgb(151, 148, 148);
color: #fff;
font-size: 12px;
text-align: center;
line-height: 50px;
text-decoration: none;
/* 固定定位 */
position: fixed;
bottom: 100px;
right: 20px;
}
.top:hover {
background-color: gold;
}
</style>
<body>
<a href="#" class="top"> 返回顶部 </a>
</body>
效果:
左右固定,中间自适应布局
<style>
body {
margin: 0;
}
.left {
width: 200px;
/* 固定定位 */
position: fixed;
top: 0;
bottom: 0;
left: 0;
background-color: skyblue;
}
.right {
width: 150px;
position: fixed;
right: 0;
top: 0;
bottom: 0;
background-color: khaki;
}
.main {
margin: 0 160px 0px 210px;
background-color: tomato;
min-height: 700px;
}
</style>
<body>
<div class="left"></div>
<div class="main"></div>
<div class="right"></div>
</body>
粘性定位
- 给需要添加粘性定位的元素,加上“position:sticky;”
- 粘性定位可以看做是“相对定位”与“固定定位”的混合产物(这里的固定定位,并不是我们上面说的position:fixed;只是有相似点)
- 当滚动高度小于元素所在位置时,元素以相对定位呈现
- 当滚动高度大于元素所在位置时,元素以固定定位呈现
- 当滚动高度大于(元素的父元素底部与浏览器高)时,元素相对于父元素定位一起移走
- 粘性定位相对离他最近的一个拥有“滚动机制”的祖先元素(当该祖先的overflow是hidden、scroll、auto或overlay时)定位或直接块级父元素定位
固定在离自己最近的拥有“滚动机制的祖先上”
- 当父元素没有滚动条:
<style>
body {
margin: 0;
height: 2000px;
}
.top {
height: 100px;
background-color: pink;
}
.main {
width: 1000px;
margin: 20px auto;
/* 这里的高度一定要大于.head元素的高度,否则看不到粘性定位效果 */
height: 700px;
background-color: salmon;
}
.head {
height: 200px;
background-color: rgb(240, 230, 140, 0.5);
/* 粘性定位 */
position: sticky;
top: 0px;
}
</style>
<body>
<div class="top"></div>
<div class="main">
<!-- 粘性定位的元素 -->
<div class="head"></div>
</div>
</body>
效果:
元素的父级拥有“滚动机制”
- 当父级元素有滚动条时,元素一直固定在父级元素的最顶部
<style>
body {
margin: 0;
height: 2000px;
}
.top {
height: 100px;
background-color: pink;
}
.main {
width: 500px;
margin: 20px auto;
height: 300px;
overflow: auto;
}
.head {
height: 200px;
background-color: rgb(240, 230, 140, 0.5);
/* 粘性定位 */
position: sticky;
top: 0px;
}
.con {
height: 700px;
background-color: skyblue;
}
</style>
<body>
<div class="top"></div>
<div class="main">
<div class="head">111</div>
<div class="con">222</div>
</div>
</body>
效果:
粘性定位应用场景
1.字母排序显示效果
<!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>
.container {
width: 500px;
height: 300px;
overflow-y: scroll;
}
dl dt {
font-size: 20px;
height: 30px;
background-color: rgb(255, 192, 203);
position: sticky;
top: 0;
}
dl dd {
line-height: 30px;
font-size: 20px;
}
</style>
</head>
<body>
<div class="container">
<dl>
<dt>A</dt>
<dd>Andrew W.K.</dd>
<dd>Apparat</dd>
<dd>Arcade Fire</dd>
<dd>Apple</dd>
<dd>Apparent</dd>
</dl>
<dl>
<dt>B</dt>
<dd>Banana</dd>
<dd>Ban</dd>
<dd>Buy</dd>
<dd>Bad</dd>
<dd>Binary</dd>
</dl>
<dl>
<dt>C</dt>
<dd>Christmas</dd>
<dd>Cheer</dd>
<dd>Chemistry</dd>
<dd>China</dd>
<dd>chorom</dd>
</dl>
</div>
</body>
</html>
效果:
2.表格首行冻结
<style>
.box {
width: 500px;
height: 200px;
/* y轴方向溢出,显示滚动条 */
overflow-y: scroll;
}
table {
width: 100%;
/* 合并单元格边框线 */
border-collapse: collapse;
}
table tr td,
table tr th {
border: 1px solid #ddd;
}
table tr th {
background-color: skyblue;
height: 50px;
/* 表格首行冻结 */
position: sticky;
top: 0;
}
table tr td {
font-size: 16px;
text-align: center;
height: 40px;
}
</style>
<body>
<div class="box">
<table>
<tr>
<th>姓名</th>
<th>学号</th>
<th>成绩</th>
<th>排名</th>
</tr>
<tr>
<td>张三</td>
<td>0001</td>
<td>90</td>
<td>1</td>
</tr>
<tr>
<td>张四</td>
<td>0002</td>
<td>80</td>
<td>2</td>
</tr>
<tr>
<td>张五</td>
<td>0003</td>
<td>77</td>
<td>3</td>
</tr>
<tr>
<td>张六</td>
<td>0004</td>
<td>70</td>
<td>4</td>
</tr>
<tr>
<td>张七</td>
<td>0005</td>
<td>67</td>
<td>5</td>
</tr>
<tr>
<td>张八</td>
<td>0006</td>
<td>65</td>
<td>6</td>
</tr>
</table>
</div>
</body>
效果:
总结
定位类型 | 描述 | 应用场景 |
---|---|---|
相对定位 relative | 相对自身原来的位置定位,占着原来的位置 | 微调元素的位置,但还占据原来空间 只想提元升素的层级,但还是占原来的空间 |
绝对定位 absolute | 相对离自己最近的定位的父元素定位,原来的位置被释放,相当于悬浮在页面中,会覆盖在其它元素的上面显示 | 一个元素想覆盖在另一个元素上面 配合 JS 来实现动画效果 |
固定定位 fixed | 相对浏览器窗口进行定位 | 你想让一个元素相对浏览器的位置一直不动 |
粘性定位 sticky | 相对离自己最近的拥有滚动机制的父元素定位,或(直接父元素定位) | 吸附效,冻结效果 |