css基础-9-定位
文章目录
- 为什么需要定位
- 如何定位
- 相对定位
- 绝对定位
- 固定定位
- 粘性定位
- 叠放次序
- 参考
为什么需要定位
- 网页中需要设置某些元素的位置，使得出现在特定位置，例如小米官网右侧的列表窗口，随着下拉页面始终固定在页面中
如何定位
position开启不同定位方式- 定位效果：定位模式 + 边偏移
| 定位模式值 | 描述 |
|---|---|
| absolute | 绝对定位，相对其带有定位的最近父元素定位 |
| relative | 相对定位，相对自己原来位置定位，不脱标准流，保留原来位置空间 |
| fixed | 固定定位，相对浏览器可视窗口定位 |
| sticky | 粘性定位 |
| static | 静态定位（默认） |
| 定位模式值 | 描述 |
|---|---|
| top | 定义元素相对与其父元素上边偏移量 |
| bottom | 定义元素相对与其父元素下边偏移量 |
| left | 定义元素相对与其父元素左边偏移量 |
| right | 定义元素相对与其父元素右边偏移量 |
相对定位
- 相对定位是相对于元素自身原来位置定位
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 200px;
height: 200px;
}
/* box1开启相对定位，偏移之后，原来位置仍然保留，不影响后续布局 */
.box1 {
position: relative;
top: 100px;
left: 100px;
background-color: salmon;
}
.box2 {
background-color: sandybrown;
}
style>
head>
<body>
<div class="box1">box1div>
<div class="box2">box2div>
body>
html>
绝对定位
- 绝对定位相对与其祖先元素定位
- 若无祖先元素或祖先元素未定位，则相对与
html定位 - 若父元素开启了定位（非
static），则子元素相对带有定位的最近一级父元素偏移定位 - 绝对定位脱离文档定位，不保留原来空间
- 由于脱离文档流，后续的元素会占用其空间
- 行内元素可以设置宽高
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<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">sondiv>
div>
body>
html>
绝对定位和相对定位该什么时候用呢？
- 以轮播图为例，左右滑动和右下的按钮属于子元素，可以开启绝对定位，此时相对包括它的父元素定位，可以在父元素范围的任意位置设置，并且脱离文档流，不影响其他布局
- 父元素必须开启定位，此时应该开启相对定位，若开启绝对定位会导致其他布局混乱问题
- 总结来说，常用
子绝父相的定位模式
- 绝对定位如何居中显示
- 开启绝对定位的元素无法使用
margin:0 auto;居中显示 - 通过两步法使得绝对定位居中显示：
1.将元素的left偏移量设置为父元素宽度的50%
2.将元素的margin-left设置为自身宽度的-50%
- 开启绝对定位的元素无法使用
- 绝对定位（脱标的定位）具有类似浮动的效果，行内元素开启绝对定位，则可直接设置宽高，而块元素开启绝对定位不给宽高则默认是内容大小
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<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;
/* 开启绝对定位，元素无法通过margin:0 auto;水平居中 */
/* margin: 0 auto; */
/* 第一步，左偏移网页的宽度50% */
left: 50%;
/* 第二步，左偏移div宽度-50% */
margin-left: -100px;
}
style>
head>
<body>
<div class="father">father
<div class="son">sondiv>
div>
body>
html>
固定定位
- 固定定位相对浏览器可视窗口定位，可视窗口会随着浏览器缩放动态变化
- 不随滚动条而动
- 脱标，不再保留位置，浮于页面
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<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老师