定位组成
定位 = 定位模式 + 边偏移
定位模式适用于制定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。
定位模式
定位模式决定元素的定位方式,通过position属性来设置:
值 | 语义 |
---|---|
static | 静态定位 |
relative | 相对定位 |
absolute | 绝对定位 |
fixed | 固定定位 |
边偏移
边偏移就是使定位的盒子移动到最终位置,属性值如下:
边偏移属性 | 示例 | 描述 |
---|---|---|
top | top: 80px | 顶端偏移量,定义元素相对于其父元素上边线的距离 |
bottom | bottom: 80px | 底部偏移量,定义元素相对于其父元素下边线的距离 |
left | left: 80px | 左侧偏移量,定义元素相对于其父元素左边线的距离 |
right | right: 80px | 右侧偏移量,定义元素相对于其父元素右边线的距离 |
相对定位relative(重要)
相对定位是元素在移动位置的时候,相对于它原来的位置来说的。
语法:
选择器 {
position: relative;
}
注意细节:
- 他是相对于自己原来的位置来移动的。(移动位置的时候,参照点还是自己原来的位置)
- 原来在标准流的位置继续占有,后面的后面的盒子仍然以标准流的方式对待它(不脱标,继续保留原来位置)
- 给绝对定位当爹的!!!(后面进行解释)
代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>相对定位</title>
<style>
.box1 {
position: relative;
top: 100px;
left: 100px;
width: 200px;
height: 200px;
background-color: pink;
}
.box2 {
width: 200px;
height: 200px;
background-color: deeppink;
}
</style>
</head>
<body>
<div class="box1">
</div>
<div class="box2">
</div>
</body>
</html>
绝对定位absolute(重要)
绝对定位是元素在移动位置的时候,是相对于它的祖先元素来说的。
语法:
选择器 {
position: absolute;
}
注意细节:
- 如果没有祖先元素或者祖先元素没有定位,则以浏览器为准来定位。
- 如果祖先元素有定位(相对、绝对、固定定位),则以最近一级的有定位祖先元素为参考点来移动位置。
- 绝对定位不再占有原先的位置。(脱标)
绝对定位-无父级或父级无定位,代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>绝对定位-无父亲或者父亲无定位</title>
<style>
.father {
width: 500px;
height: 500px;
background-color: skyblue;
}
.son {
position: absolute;
/* top: 10px;
left: 10px; */
/* top: 100px;
right: 200px; */
left: 0;
bottom: 0;
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
绝对定位-父级有定位,代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>绝对定位-父级有定位</title>
<style>
.yeye {
position: relative;
width: 800px;
height: 800px;
background-color: hotpink;
padding: 50px;
}
.father {
width: 500px;
height: 500px;
background-color: skyblue;
}
.son {
position: absolute;
left: 30px;
bottom: 10px;
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div class="yeye">
<div class="father">
<div class="son"></div>
</div>
</div>
</body>
</html>
固定定位fixed(重要)
固定定位是元素固定于浏览器可视区的位置。主要使用场景:在浏览器页面滚动的时候,在浏览器侧边有一个固定内容,其位置相对于浏览器窗口位置没有发生改变,
语法:
选择器 {
position: fixes;
}
注意细节:
- 以浏览器可是窗口为参照点移动位置
- 跟父元素没有任何关系
- 不随滚动条滚动
- 固定位置不再占有原先的位置(脱标,可以看作一种特殊的绝对定位)
代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>固定定位</title>
<style>
.dj {
position: fixed;
top: 100px;
left: 40px;
}
</style>
</head>
<body>
<div class="dj">
<img src="images/pvp.png" alt="">
</div>
<p>请尽情吩咐妲己,主人</p>
<p>请尽情吩咐妲己,主人</p>
<p>请尽情吩咐妲己,主人</p>
<p>请尽情吩咐妲己,主人</p>
<p>请尽情吩咐妲己,主人</p>
<p>请尽情吩咐妲己,主人</p>
<p>请尽情吩咐妲己,主人</p>
<p>请尽情吩咐妲己,主人</p>
<p>请尽情吩咐妲己,主人</p>
<p>请尽情吩咐妲己,主人</p>
<p>请尽情吩咐妲己,主人</p>
<p>请尽情吩咐妲己,主人</p>
<p>请尽情吩咐妲己,主人</p>
<p>请尽情吩咐妲己,主人</p>
<p>请尽情吩咐妲己,主人</p>
<p>请尽情吩咐妲己,主人</p>
<p>请尽情吩咐妲己,主人</p>
<p>请尽情吩咐妲己,主人</p>
<p>请尽情吩咐妲己,主人</p>
<p>请尽情吩咐妲己,主人</p>
<p>请尽情吩咐妲己,主人</p>
<p>请尽情吩咐妲己,主人</p>
<p>请尽情吩咐妲己,主人</p>
<p>请尽情吩咐妲己,主人</p>
<p>请尽情吩咐妲己,主人</p>
<p>请尽情吩咐妲己,主人</p>
<p>请尽情吩咐妲己,主人</p>
<p>请尽情吩咐妲己,主人</p>
<p>请尽情吩咐妲己,主人</p>
<p>请尽情吩咐妲己,主人</p>
<p>请尽情吩咐妲己,主人</p>
<p>请尽情吩咐妲己,主人</p>
<p>请尽情吩咐妲己,主人</p>
<p>请尽情吩咐妲己,主人</p>
<p>请尽情吩咐妲己,主人</p>
<p>请尽情吩咐妲己,主人</p>
<p>请尽情吩咐妲己,主人</p>
<p>请尽情吩咐妲己,主人</p>
<p>请尽情吩咐妲己,主人</p>
<p>请尽情吩咐妲己,主人</p>
<p>请尽情吩咐妲己,主人</p>
<p>请尽情吩咐妲己,主人</p>
<p>请尽情吩咐妲己,主人</p>
<p>请尽情吩咐妲己,主人</p>
<p>请尽情吩咐妲己,主人</p>
<p>请尽情吩咐妲己,主人</p>
<p>请尽情吩咐妲己,主人</p>
<p>请尽情吩咐妲己,主人</p>
<p>请尽情吩咐妲己,主人</p>
<p>请尽情吩咐妲己,主人</p>
<p>请尽情吩咐妲己,主人</p>
<p>请尽情吩咐妲己,主人</p>
</body>
</html>
固定定位小技巧:固定在版心右侧的位置
步骤:
- 让固定位置的盒子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">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>固定定位小技巧-固定到版心右侧</title>
<style>
.w {
width: 800px;
height: 1400px;
background-color: pink;
margin: 0 auto;
}
.fixed {
position: fixed;
/* 1. 走浏览器宽度的一半 */
left: 50%;
/* 2. 利用margin 走版心盒子宽度的一半距离 */
margin-left: 405px;
width: 50px;
height: 150px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="fixed"></div>
<div class="w">版心盒子 800像素</div>
</body>
</html>
粘性定位sticky
粘性定位可以被认为是相对定位和固定定位的混合。
语法:
选择器 {
position: sticky; top: 10px;
}
注意细节:
- 以浏览器的可视窗口为参照点移动元素(固定位置特点)
- 粘性定位占有原先的位置(相对定位特点)
- 必须添加top、left、right、bottom其中一个才有效果
跟谁页面滚动搭配使用,兼容性较差,IE不支持。
代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>粘性定位</title>
<style>
body {
height: 3000px;
}
.nav {
/* 粘性定位 */
position: sticky;
top: 0;
width: 800px;
height: 50px;
background-color: pink;
margin: 100px auto;
}
</style>
</head>
<body>
<div class="nav">我是导航栏</div>
</body>
</html>
使用技巧之子绝父相(无敌重要)(给绝对定位当爹的解释)
意思是子级使用绝对定位,父级则需要使用相对定位。
使用原因:因为父级需要占有位置,因此需要使用相对定位。子级盒子不需要占有位置,则是使用决定定位。
注意细节:
- 子级使用绝对位置,不会占有位置。可以放到父盒子里面的任何一个地方,不会影响其他的兄弟盒子。
- 父盒子需要加定位限制子盒子在父盒子内显示。
- 父盒子布局的时候,需要占有位置,因此父级只能是相对定位。
总结
定位模式 | 是否脱标 | 移动位置 | 使用频率 |
---|---|---|---|
static静态定位 | 否 | 不能使用边偏移 | 很少 |
relative相对定位 | 否(占有位置) | 相对于自身位置移动 | 常用 |
absolute绝对定位 | 是(不占有位置) | 带有定位的父级 | 常用 |
fixed固定定位 | 是(不占有位置) | 浏览器可视区 | 常用 |
sticky粘性定位 | 否(占有位置) | 浏览器可视区 | 较少 |