本文详细介绍了CSS定位，包括静态定位、相对定位、绝对定位、固定定位和粘性定位的概念、特点、语法及应用场景。还探讨了定位叠放次序、子绝父相等定位特性，并提供了各种定位方式的示例和使用技巧。
定位
含义：
是将盒子定在某个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。
计算方式：
- 定位 = 定位模式 + 边偏移
定位模式：用于指定一个元素在文档中的定位方式。
边偏移：则决定该元素的最终位置。
定位模式：
- 定位模式决定元素的定位方式，它通过CSS的
position属性来设置，其值可以分为四个：
| 值 | 语义 |
|---|---|
static | 静态定位 |
relative | 相对定位 |
absolute | 绝对定位 |
fixed | 固定定位 |
边偏移：
- 边偏移就是定位的盒子移动到最终的位置，有
top、bottom、left、right四个属性
| 边偏移属性 | 示例 | 描述 |
|---|---|---|
top | top：80px | 顶端偏移量，定义元素相对其父元素上边线的距离 |
bottom | bottom：80px | 底部偏移量，定义元素相对其父元素下边线的距离 |
left | left：80px | 左侧偏移量，定义元素相对其父元素左侧边线的距离 |
right | right：80px | 右侧偏移量，定义元素相对其父元素右侧边线的距离 |
静态定位static：
静态定位是元素的默认定位方式，无定位的意思。
语法格式：
选择器{ position：static;}
注意:
-
静态定位按照标准流特性摆放位置，他没有边偏移
-
静态定位在布局中很少用到。
相对定位relative：
- 相对定位是元素在移动位置的时候，是相对于它原来的位置来说的。
语法格式：
选择器{ position：relative;}
特点：
它是相对自己原来的位置来移动的(移动位置的时候参照点是自己原来的位置)。
原来在标准流的位置继续占有，后面的盒子仍以标准流的方式对它(不脱标，继续保留原来的位置)。
示例：
绝对定位absolute：
绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的。
语法格式：
选择器{ position：absolute;}
特点：
- 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位。
- 如果祖先元素有定位(相对、绝对、固定定位)，则以最近一级的有定位的祖先元素为参考点移动位置。
- 绝对定位不在占有原先的位置(脱标)。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绝对定位</title>
<style>
.father{
width: 50px;
height: 20px;
background-color: #00a4ff;
}
.son{
/*给予一个绝对定位*/
position: absolute;
/*绝对定位的边偏移*/
top: 100px;
left: 50px;
width: 50px;
height: 50px;
background-color: pink;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
显示样式：
固定定位fixed:
固定定位时元素固定于浏览器可视区域的位置，主要适用场景：可以在浏览器页面滚动时元素的位置不会发生改变。
语法格式： 选择器{
position：fixed;}
特点：
- 以浏览器的可视窗口为参照物移动元素。
- 跟父元素没有任何关系。
- 不随滚动条滚动。
- 固定定位不在占有原先位置。
- 固定定位也是脱标的，其实固定定位也可以看作是一种特殊的绝对定位。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>固定定位</title>
<style>
.son{
position: fixed;
top: 20px;
left: 50px;
}
</style>
</head>
<body>
<div class="son">
<img src="../../images/妲己.png" alt="#">
</div>
<p>请尽情吩咐妲己，欧巴</p>
<p>请尽情吩咐妲己，欧巴</p>
<p>请尽情吩咐妲己，欧巴</p>
<p>请尽情吩咐妲己，欧巴</p>
<p>请尽情吩咐妲己，欧巴</p>
<p>请尽情吩咐妲己，欧巴</p>
<p>请尽情吩咐妲己，欧巴</p>
<p>请尽情吩咐妲己，欧巴</p>
<p>请尽情吩咐妲己，欧巴</p>
显示样式：
粘性定位sticky：
粘性定位可以被认为是相对定位和固定定位的混合。
语法格式： 选择器{
position：sticky; top：10px}
特点：
- 以浏览器的可视窗口为参照点移动元素。
- 粘性定位占有位置(相对定位特点)。
- 必须添加top、left、right、bottom其中一个才有效果。
- 跟页面滚动搭配使用，兼容性较差，IE不支持。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>粘性定位</title>
<style>
.body {
height: 1200px;
}
.box {
/*添加一个粘性定位(必须跟一个top、bottom、left、right值)*/
position: sticky;
/*可视界面的上部10像素*/
top: 10px;
width: 200px;
height: 50px;
margin: 100px auto;
background-color: #00a4ff;
}
</style>
</head>
<body class="body">
<div class="box">我是导航栏</div>
</body>
</html>
显示动画：
定位叠放次序z-index
- 在使用定位布局时，可能出现盒子重叠的情况。此时，可以使用
z-index来控制盒子的前后次序(z轴)。
语法格式：
选择器{ z-index：1;}
特点：
- 数值可以是正整数，负整数或
0，默认的是auto，数值越大，盒子越靠上。 - 如果属性值相同，则按照书写顺序，后来者居上。
- 数字后面不能加单位
- 只有定位的盒子才有
z-index属性
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定位叠放次序</title>
<style>
.box{
/*给子盒子加上一个固定定位，此时三个盒子会通过调用类的不同先后次序来进行叠放*/
position: fixed;
width: 100px;
height: 100px;
}
.blue{
top: 50px;
left: 20px;
background-color: blue;
}
.pink{
z-index: 1;/*添加叠放次序的优先级*/
top: 80px;
left: 60px;
background-color: pink;
}
.yellow{
background-color: yellow;
}
</style>
</head>
<body>
<div class="box blue">熊大</div>
<div class="box pink">熊二</div>
<div class="box yellow">光头强</div>
</body>
</html>
显示样式：
各类定位模式的特性：
| 定位模式 | 是否脱标 | 移动位置 | 是否常用 |
|---|---|---|---|
static静态定位 | 否 | 不能使用边偏移 | 很少 |
relative相对定位 | 是(占有位置) | 相对于自身位置移动 | 常用 |
absolute绝对定位 | 是(不占有位置) | 浏览器可视区 | 常用 |
fixed固定定位 | 是(不占有位置) | 浏览器可视区 | 常用 |
sticky粘性定位 | 否(占有位置) | 浏览器可视区 | 当前阶段很少 |
定位特殊特性:
- 绝对定位和固定定位也和浮动类似
- 行内元素添加绝对或者固定定位，可以直接设置高度和宽度。
- 块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。
定位的拓展：
- 绝对定位(固定定位)会完全压住盒子
- 浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字(图片)
- 但是绝对定位(固定定位)会压住下面标准流的所有内容。
子绝父相
是定位中最常用的一种定位方式， 这句话的意思是：子级是绝对定位的话，父亲就要用相对定位。
原因：
- 子级绝对定位，不会占有位置，可以放在父盒子里面的任何一个地方，不会影响其他的兄弟盒子。
- 父盒子需要加定位限制子盒子在父盒子的显示。
- 父盒子布局时，需要占有位置，因此父亲只能时相对定位。
固定定位的小技巧：固定在版心右侧位置
- 小算法：
- 让固定定位的盒子
left：50%,走到浏览器可视区域的一半位置。 - 让固定定位的盒子
margin-left：版心宽度的一半即可，多走版心宽度的一半位置。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>固定到版心盒子的右侧</title>
<style>
.box1{
/*给它一个固定定位*/
position: fixed;
/*固定定位的边偏移*/
left: 50%;
top: 20px;
/*再给一个距离版心盒子的外边距，使盒子位于合适的位置*/
margin-left: 252px;/*给版心盒子一半的宽度即可*/
width: 50px;
height: 100px;
font-size: 5px;
background-color: #00a4ff;
}
.box2{
width: 500px;
height: 1200px;
background-color: #ff6700;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="box1">宽度：50;高度：100;</div>
<div class="box2">版心盒子，宽度：500;高度：300;</div>
</body>
</html>
显示样式：
绝对定位的盒子居中
加了绝对定位的盒子不能通过
margin：0 auto;实现水平居中，但是可以通过以下计算方法实现水平和垂直居中。
left：50%;：让盒子的左侧移动到父级元素的水平中心位置。margin-left：本身给盒子的一半宽度;：让盒子向左移动自身宽度的一般。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绝对定位的盒子居中</title>
<style>
.box{
position: absolute;/*给盒子添加一个绝对定位*/
/*给他一个边去便宜量*/
left: 50%;
margin-left: -100px;/*让盒子向左移动自身宽度的一半*/
top: 50%;
margin-top: -100px;/*让盒子向下移动自身宽度的一半*/
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
显示样式：
元素的显示与隐藏
本质：
- 让一个元素在页面中隐藏或显示出来。
display显示隐藏：
display：none;隐藏对象display：block;除了转换块级元素之外，同时还有显示元素的意思。
display元素隐藏了之后，不在占有位置
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>display属性</title>
<style>
.peiqi,
.qiaozhi {
width: 200px;
height: 200px;
}
.peiqi {
/*display: block;!*显示属性*!*/
display: none; /*隐藏属性，不占有原先位置*/
background-color: #00a4ff;
}
.qiaozhi {
background-color: #ff6700;
}
</style>
</head>
<body>
<div class="peiqi">佩奇</div>
<div class="qiaozhi">乔治</div>
</body>
</html>
显示样式
visibility可见性：
visibility属性用于指定一个元素应可见还是隐藏visibility：visible;元素可视visibility：hidden;元素隐藏- visibility元素隐藏了之后，继续占有原来位置
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>visibility属性</title>
<style>
.qiaozi,
.peiqi {
width: 200px;
height: 200px;
}
.qiaozi {
background-color: pink;
}
.peiqi {
visibility: visible; /*元素可视*/
/*visibility: hidden;!*元素隐藏之后，继续占有位置*!*/
background-color: #1c036c;
}
</style>
</head>
<body>
<div class="peiqi">佩奇</div>
<div class="qiaozi">乔治</div>
</body>
</html>
显示样式：
overflow溢出：
overflow属性是指定了如果内容溢出一个元素的框(超过其指定高度及宽度)时。
| 属性值 | 描述 |
|---|---|
visible | 不剪切内容也不添加滚动条 |
hidden | 不显示超过对象尺寸的内容，超出的部分隐藏掉 |
scroll | 不管超出内容否，总时显示滚动条 |
auto | 超出自动显示滚动条，不超出不显示滚动条 |
- 一般情况下，我们都不想溢出的内容显示出来，因为溢出的部分会影响布局。
- 但是如果有定位的盒子，请慎用
overflow：hidden;因为它会隐藏多余的部分。
如果元素隐藏乐之后还要占有原来位置，就用
visibility：hidde;
如果隐藏元素不想要原来位置，就用display：none;
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>溢出隐藏</title>
<style>
.duanluo{
/*overflow: hidden;!*将超过父盒子的文字隐藏起来*!*/
/*overflow: auto;!*添加一个滚动条，在需要时剪切内容并添加滚动条 *!*/
/*overflow: visible;!*默认效果，无删改*!*/
overflow: scroll;/*总是显示滚动条*/
width: 100px;
height: 100px;
border: 3px solid #ff6700;
margin: 100px auto;
}
</style>
</head>
<body>
<div class="duanluo">
是否会实打实的将阿里的教案课件到基地哦偶尔发
见扫分离技术封禁啊发觉司法局哦杰佛萨浪费就浪费巨大横幅燃烧的发生佛i噢i撒娇佛寺就佛教
</div>
</body>
</html>
实现样式：
总结：
display显示隐藏元素，但是不保留位置。visibility显示隐藏元素，但是保留位置。overflow溢出显示隐藏，但是只是对溢出部分的处理。
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
