为什么需要定位
- 网页中需要设置某些元素的位置,使得出现在特定位置,例如小米官网右侧的列表窗口,随着下拉页面始终固定在页面中
如何定位
position
开启不同定位方式- 定位效果:定位模式 + 边偏移
定位模式值 | 描述 |
---|
absolute | 绝对定位,相对其带有定位的最近父元素定位 |
relative | 相对定位,相对自己原来位置定位,不脱标准流,保留原来位置空间 |
fixed | 固定定位,相对浏览器可视窗口定位 |
sticky | 粘性定位 |
static | 静态定位(默认) |
定位模式值 | 描述 |
---|
top | 定义元素相对与其父元素上边偏移量 |
bottom | 定义元素相对与其父元素下边偏移量 |
left | 定义元素相对与其父元素左边偏移量 |
right | 定义元素相对与其父元素右边偏移量 |
相对定位
<!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>
* {
margin: 0;
padding: 0;
}
div {
width: 200px;
height: 200px;
}
.box1 {
position: relative;
top: 100px;
left: 100px;
background-color: salmon;
}
.box2 {
background-color: sandybrown;
}
</style>
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
</body>
</html>
绝对定位
- 绝对定位相对与其祖先元素定位
- 若无祖先元素或祖先元素未定位,则相对与
html
定位 - 若父元素开启了定位(非
static
),则子元素相对带有定位的最近一级父元素偏移定位 - 绝对定位脱离文档定位,不保留原来空间
- 由于脱离文档流,后续的元素会占用其空间
- 行内元素可以设置宽高
<!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>
* {
margin: 0;
padding: 0;
}
.father {
position: relative;
width: 200px;
height: 200px;
background-color: salmon;
}
.son {
position: absolute;
top: 10px;
right: 10px;
width: 60px;
height: 30px;
background-color: sandybrown;
}
</style>
</head>
<body>
<div class="father">father
<div class="son">son</div>
</div>
</body>
</html>
绝对定位和相对定位该什么时候用呢?
- 以轮播图为例,左右滑动和右下的按钮属于子元素,可以开启绝对定位,此时相对包括它的父元素定位,可以在父元素范围的任意位置设置,并且脱离文档流,不影响其他布局
- 父元素必须开启定位,此时应该开启相对定位,若开启绝对定位会导致其他布局混乱问题
- 总结来说,常用
子绝父相
的定位模式
- 绝对定位如何居中显示
- 开启绝对定位的元素无法使用
margin:0 auto;
居中显示 - 通过两步法使得绝对定位居中显示:
1.将元素的left
偏移量设置为父元素宽度的50%
2.将元素的margin-left
设置为自身宽度的 -50%
- 绝对定位(脱标的定位)具有类似浮动的效果,行内元素开启绝对定位,则可直接设置宽高,而块元素开启绝对定位不给宽高则默认是内容大小
<!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>
.father {
position: relative;
width: 400px;
height: 400px;
background-color: rgba(0, 0, 0, 0.3);
}
.son {
position: absolute;
width: 200px;
height: 100px;
background-color: salmon;
left: 50%;
margin-left: -100px;
}
</style>
</head>
<body>
<div class="father">father
<div class="son">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">
<title>Document</title>
<style>
body {
height: 4000px;
}
div>img {
position: fixed;
top: 330px;
right: 10px;
height: 200px;
}
</style>
</head>
<body>
<div><img src="http://suo.im/6nrYqh" alt=""></div>
</body>
</html>
粘性定位
- 以浏览器可视窗口为参照
- 占有原来的位置
- 必须添加
top/bottom/left/right
其一的值
叠放次序
z-index
:设置当元素重叠时的显示先后顺序(图层)- 值可以是正/负或0,值越大盒子越靠上
- 默认
auto
,当一样时,根据书写顺序,后来居上
参考
黑马pink老师