OmniStack Lab

1.定位介绍

1.1 为什么使用定位

我们先来看一个效果,同时思考一下用标准流或浮动能否实现类似的效果？

场景1: 某个元素可以自由的在一个盒子内移动位置,并且压住其他盒子.

场景2: 当我们滚动窗口的时候,盒子是固定屏幕某个位置的。

结论: 要实现以上效果,标准流 或 浮动 都无法快速实现
所以:

浮动可以让多个块级盒子一行没有缝隙排列显示,经常用于横向排列盒子。
定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置,并且可以压住其他盒子。

1.2 定位组成

定位: 将盒子定在某一个位置,所以定位也是在摆放盒子,按照定位的方式移动盒子
定位也是用来布局的,它有两部分组成:

定位 = 定位模式 + 边偏移

定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。

1.2.1 定位模式

在 CSS 中,通过position属性定义元素的定位模式,语法如下:

aiignore

选择器 { 
    position: 属性值; 
}

定位模式是有不同分类的,在不同情况下,我们用到不同的定位模式。
定位模式决定元素的定位方式,它通过 CSS 的 position 属性来设置,其值可以分为四个:

属性值	语义	使用场景
static	静态定位	默认定位方式,元素正常流排列
relative	相对定位	元素相对于自身位置进行偏移
absolute	绝对定位	元素相对于最近定位祖先定位
fixed	固定定位	元素相对于浏览器窗口定位
sticky	粘性定位	在特定阈值时变为固定定位

1.2.2 边偏移

边偏移 就是定位的盒子移动到最终位置。有 top、bottom、left 和 right4 个属性。

边偏移属性	描述	示例
top	顶端偏移量,定义元素相对于其父元素上边线的距离	`top: 10px;`
bottom	底部偏移量,定义元素相对于其父元素下边线的距离	`bottom: 20px;`
left	左侧偏移量,定义元素相对于其父元素左边线的距离	`left: 15px;`
right	右侧偏移量,定义元素相对于其父元素右边线的距离	`right: 5px;`

定位的盒子有了边偏移才有价值。一般情况下,凡是有定位地方必定有边偏移。

1.3 定位模式介绍

1.3.1 静态定位(static) - 了解

静态定位是元素的默认定位方式,无定位的意思。它相当于 border 里面的none,静态定位static,不要定位的时候用。
语法:

aiignore

选择器 { 
    position: static; 
}

静态定位按照标准流特性摆放位置,它没有边偏移。
静态定位在布局时我们几乎不用的

1.3.2 相对定位(relative) - 重要

相对定位是元素在移动位置的时候,是相对于它自己原来的位置来说的(自恋型)。语法:

aiignore

选择器 { 
	position: relative; 
}

相对定位的特点:(务必记住)

1. 它是相对于自己原来的位置来移动的(移动位置的时候参照点是自己原来的位置)。
1. 原来在标准流的位置继续占有,后面的盒子仍然以标准流的方式对待它。因此,相对定位并没有脱标。它最典型的应用是给绝对定位当爹的。

效果图:

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>
        .box1 {
            position: relative;
            top: 100px;
            left: 100px;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .box2 {
            width: 200px;
            height: 200px;
            background-color: plum;
        }
    </style>
</head>
<body>
    <div class="box1">box1</div>
    <div class="box2">box2</div>
</body>
</html>

1.3.3 绝对定位(absolute) - 重要

1.3.3.1 绝对定位的介绍

绝对定位是元素在移动位置的时候,是相对于它祖先元素来说的(拼爹型)。
语法:

aiignore

 选择器 { 
 	position: absolute; 
 }

完全脱标 不占位置,如果一个元素添加了定位那么它将不占据原来位置,后面标准流元素会占据它的位置
父元素没有定位,则以浏览器为准定位(Document 文档)。

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>
        .father {
            
            width: 500px;
            height: 500px;
            background-color: pink;
            margin: 150px;
        }
        .son1 {
            position: absolute;
            top: 0;
            left: 0;
            width: 100px;
            height: 100px;
            background-color: plum;
        }
        .son2 {
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="father">
        父级元素
        <div class="son1">儿子1</div>
        <div class="son2">儿子2</div>
    </div>
    
</body>
</html>

父元素要有定位,元素将依据最近的已经定位(绝对、固定或相对定位)的父元素(祖先)进行定位。

如果有三个元素最外层元素爷爷元素有有定位,父元素没有定位,那么子元素跟着爷爷元素的定位做绝对定位

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>
        * {
            margin: 0;
            padding: 0;
        }
        .father {
            width: 250px;
            height: 250px;
            background-color: pink;
            margin: 100px;
        }
        .yeye {
            position: absolute;
            top: 0;
            left: 0;
            width: 500px;
            height: 500px;
            background-color: plum;
        }
        .son1 {
            position: absolute;
            top: 25px;
            left: 25px;
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="yeye">
        爷爷元素
        <div class="father">
        父级元素
        <div class="son1">儿子1</div>
    </div>
    </div>
</body>
</html>

如果三个元素都有定位,那么跟着父元素的定位做绝对定位

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>
        * {
            margin: 0;
            padding: 0;
        }
        .father {
            position: absolute;
            top: 0;
            left: 0;
            width: 250px;
            height: 250px;
            background-color: pink;
            margin: 100px;
        }
        .yeye {
            position: absolute;
            top: 0;
            left: 0;
            width: 500px;
            height: 500px;
            background-color: plum;
        }
        .son1 {
            position: absolute;
            top: 25px;
            left: 25px;
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="yeye">
        爷爷元素
        <div class="father">
        父级元素
        <div class="son1">儿子1</div>
    </div>
    </div>
</body>
</html>

绝对定位的特点总结:(务必记住)

如果没有祖先元素或者祖先元素没有定位,则以浏览器为基准定位(Document文档)。
如果祖先元素有定位(相对、绝对、固定定位),则以最近一级的有定位祖先元素为参考点移动位置。
绝对定位不再占有原先的位置。所以绝对定位是脱离标准流的。

1.3.3.2 定位口诀 —— 子绝父相

弄清楚这个口诀,就明白了绝对定位和相对定位的使用场景。
这个**"子绝父相"太重要了,是我们学习定位的口诀**,是定位中最常用的一种方式这句话的意思是,子级是绝对定位的话,父级要用相对定位。
因为绝对定位的盒子是拼爹的,所以要和父级搭配一起来使用。

子级绝对定位,不会占有位置,可以放到父盒子里面的任何一个地方,不会影响其他的兄弟盒子。
父盒子需要加定位限制子盒子在父盒子内显示。
父盒子布局时,需要占有位置,因此父亲只能是相对定位。

这就是子绝父相的由来,所以相对定位经常用来作为绝对定位的父级。
总结: 因为父级需要占有位置,因此是相对定位,子盒子不需要占有位置,则是绝对定位
当然,子绝父相不是永远不变的,如果父元素不需要占有位置,子绝父绝也会遇到。

疑问:为什么在布局时,子级元素使用绝对定位时,父级元素就要用相对定位呢？
观察下图,思考一下在布局时,左右两个方向的箭头图片以及父级盒子的定位方式。

分析:

方向箭头叠加在其他图片上方,应该使用绝对定位,因为绝对定位完全脱标,完全不占位置。
父级盒子应该使用相对定位,因为相对定位不脱标,后续盒子仍然以标准流的方式对待它。
- 如果父级盒子也使用绝对定位,会完全脱标,那么下方的广告盒子会上移,这显然不是我们想要的。

结论: 父级要占有位置,子级要任意摆放,这就是子绝父相的由来。

1.3.4 绝对定位(absolute) - 重要

固定定位是元素固定于浏览器可视区的位置。(认死理型)
主要使用场景: 可以在浏览器页面滚动时元素的位置不会改变。

语法:

aiignore

选择器 { 
 	position: fixed; 
}

固定定位的特点: (务必记住)

以浏览器的可视窗口为参照点移动元素。

跟父元素没有任何关系
不随滚动条滚动。

固定定位不在占有原先的位置。
固定定位也是脱标的,其实固定定位也可以看做是一种特殊的绝对定位。(认死理型)

完全脱标—— 完全不占位置;
只认浏览器的可视窗口 —— 浏览器可视窗口 + 边偏移属性 来设置元素的位置；
- 跟父元素没有任何关系；单独使用的
- 不随滚动条滚动。

固定定位举例: 提示: IE 6 等低版本浏览器不支持固定定位。

应用案例固定一个盒子会一直在版心右侧展示

让固定定位的盒子left:50% 走到浏览器可视区(也可以看作是版心)的一半的位置
让固定定位的盒子margin:left 版心宽度的一半距离。多走版心宽度的一半位置,就可以让固定定位的盒子贴着版心右侧对齐了

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>
        .w {
            width: 800px;
            height: 1800px;
            background-color: pink;
            margin: 0 auto;
        }
        .fixed {
            position: fixed;
            top: 75%;
            left: 50%;
            height: 50px;
            width: 50px;
            background-color: skyblue;
            margin-left: 400px;
        }
    </style>
</head>
<body>
    <div class="fixed"></div>
    <div class="w">版心盒子</div>
</body>
</html>

1.3.5 粘性定位(sticky) - 了解

粘性定位可以被认为是相对定位和固定定位的混合。 Sticky 粘性的
语法:

aiignore

选择器 { 
     position: sticky; 
     top: 10px; 
 }

粘性定位的特点：

以浏览器的可视窗口为参照点移动元素(固定定位特点)
粘性定位占有原先的位置(相对定位特点)
必须添加 top 、left、right、bottom 其中一个才有效跟页面滚动搭配使用。兼容性较差，IE 不支持。

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: 5000px;
        }
        .nav {
            position: sticky;
            top: 0;
            width: 1200px;
            height: 50px;
            background-color: pink;
            margin: 100px auto;
        }
    </style>
</head>
<body>
    <div class="nav">我是导航栏</div>
</body>
</html>

1.4 定位总结

定位模式	是否脱标	移动位置基准	是否常用
static	否	不移动	不常用
relative	否(占有位置)	相对于自身位置	基本单独使用
absolute	是(不占有位置)	相对于最近定位祖先/浏览器	要和定位父级元素搭配使用
fixed	是(不占有位置)	相对于浏览器窗口	单独使用，不需要父级
sticky	否	相对于浏览器窗口(达到阈值)	当前阶段很少用

一定记住相对定位、固定定位、绝对定位两个大的特点:

是否占有位置（脱标否）
以谁为基准点移动位置。

学习定位重点学会子绝父相。
边偏移需要和定位模式联合使用,单独使用无效。
top 和 bottom 不要同时使用。
left 和 right 不要同时使用。

2.综合案例: 学成在线-hot模块添加

实现下图效果:

案例分析:

一个大的 li 中包含一个课程图片,课程介绍文字信息,还有hot的小图标。
hot图片重叠在课程图片上面—— 脱标，不占位置,需要使用绝对定位。
hot图片重叠在li的右上方 —— 需要使用边偏移确定准确位置。

案例小结:

子绝父相 —— 子元素使用绝对定位，父元素使用相对定位。
与浮动的对比:
- 绝对定位: 脱标,利用边偏移指定准确位置。
- 浮动: 脱标,不能指定准确位置, 让多个块级元素在一行显示。

结构修改:

html

.box-bd ul li {
/* 子绝父相 */
/* 父元素相对定位 */
position: relative;
float: left;
width: 228px;
height: 270px;
background-color: #fff;
margin-right: 15px;
margin-bottom: 15px;

}
.box-bd ul li > img {
width: 100%;
}
.box-bd ul li h4 {
margin: 20px 20px 20px 25px;
font-size: 14px;
color: #050505;
font-weight: 400;
}
.box-bd ul li em {
/* 子元素绝对定位 */
position: absolute;
top: 4px;
right: -4px;
}

<!-- 修改.box-bd里面的li标签内容，添加一个hot图标 -->
<li>
	 <!-- 添加hot小图片 -->
    <em>
        <img src="images/hot.png" alt="">
    </em>
    <img src="images/pic.png" alt="">
    <h4>
        Think PHP 5.0 博客系统实战项目演练
    </h4>
    <div class="info">
        <span>高级</span> • 1125人在学习
    </div>
</li>

3.定位(position)的应用

3.1 固定定位小技巧: 固定在版心左侧位置

小算法:

让固定定位的盒子left: 50%. 走到浏览器可视区(也可以看做版心)的一半位置。
让固定定位的盒子margin-left: 版心宽度的一半距离。多走版心宽度的一半位置就可以让固定定位的盒子贴着版心右侧对齐了。

案例效果:

html

<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>

3.2 堆叠顺序（z-index）

在使用定位布局时,可能会出现盒子重叠的情况。此时,可以使用 z-index 来控制盒子的前后次序 (z轴)

语法:

aiignore

选择器 { 
	z-index: 1; 
}

z-index 的特性如下:

属性值: 正整数、负整数或 0,默认值是 0，数值越大,盒子越靠上。
如果属性值相同,则按照书写顺序,后来居上。
数字后面不能加单位。

注意: z-index 只能应用于相对定位、绝对定位和固定定位的元素，其他标准流、浮动和静态定位无效。

应用 z-index 层叠等级属性可以调整盒子的堆叠顺序。如下图所示:

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>
        .box {
            position: absolute;
            top: 0;
            left: 0;
            height: 200px;
            width: 200px;
        }
        .div1 {
            background-color: red;
            z-index: 1;
        }
        .div2 {
            background-color: blue;
            left: 50px;
            top: 50px;
        }
        .div3 {
            background-color: yellow;
            left: 100px;
            top: 100px;
        }
    </style>
</head>
<body>
    <div class="box div1">div块1</div>
    <div class="box div2">div块2</div>
    <div class="box div3">div块3</div>
</body>
</html>

4.定位(position)的拓展

4.1 绝对定位的盒子居中

注意:加了绝对定位/固定定位的盒子不能通过设置 margin: auto 设置水平居中。
但是可以通过以下计算方法实现水平和垂直居中，可以按照下图的方法:

left: 50%;: 让盒子的左侧移动到父级元素的水平中心位置。
margin-left: -100px;: 让盒子向左移动自身宽度的一半。

盒子居中定位示意图

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>
        .box {
            position: relative;
            height: 700px;
            width: 1000px;
            margin: 0 auto;
            background-color: pink;
        }
        .div1 {
            position: absolute;
            height: 100px;
            width: 200px;
            background-color: plum;
            left: 50%;
            top: 0;
            margin-left: -100px;
        }
        .div2 {
            position: absolute;
            height: 100px;
            width: 200px;
            background-color: plum;
            top: 50%;
            margin-top: -50px;
        }
        .div3 {
            position: absolute;
            height: 100px;
            width: 200px;
            background-color: plum;
            left: 50%;
            margin: 600px -100px;
        }
        .div4 {
            position: absolute;
            height: 100px;
            width: 200px;
            background-color: plum;
            top: 50%;
            margin: -50px 800px;
        }
        .div5 {
            position: absolute;
            height: 100px;
            width: 200px;
            background-color: plum;
            top: 50%;
            left: 50%;
            margin: -50px -100px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="div1">div1</div>
        <div class="div2">div2</div>
        <div class="div3">div3</div>
        <div class="div4">div4</div>
        <div class="div5">div5</div>
    </div>
</body>
</html>

4.1 定位特殊特性

绝对定位和固定定位也和浮动类似。

行内元素添加绝对或者固定定位，可以直接设置高度和宽度，相对定位不可以。

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>
        .span1 {
            position: relative;
            width: 100px;
            height: 200px;
            background-color: pink;
        }
        .span2 {
            position: absolute;
            width: 100px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <span class="span1">span1</span>
    <span class="span2">span2</span>
</body>
</html>

块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。

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>
        .span1 {
            background-color: pink;
        }
        .span2 {
            position: absolute;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="span1">span1</div>
    <div class="span2">span2</div>
</body>
</html>

前面我们讲过，display是显示模式，可以改变显示模式有以下方式:

可以用inline-block 转换为行内块
可以用浮动 float 默认转换为行内块(类似，并不完全一样，因为浮动是脱标的)
绝对定位和固定定位也和浮动类似，默认转换的特性转换为行内块。

所以说，一个行内的盒子，如果加了浮动、固定定位和绝对定位，不用转换，就可以给这个盒子直接设置宽度和高度等。

1.定位介绍 ​

1.1 为什么使用定位 ​

1.2 定位组成 ​

1.2.1 定位模式 ​

1.2.2 边偏移 ​

1.3 定位模式介绍 ​

1.3.1 静态定位(static) - 了解 ​

1.3.2 相对定位(relative) - 重要 ​

1.3.3 绝对定位(absolute) - 重要 ​

1.3.3.1 绝对定位的介绍 ​

1.3.3.2 定位口诀 —— 子绝父相 ​

1.3.4 绝对定位(absolute) - 重要 ​

1.3.5 粘性定位(sticky) - 了解 ​

1.4 定位总结 ​

2.综合案例: 学成在线-hot模块添加 ​

3.定位(position)的应用 ​

3.1 固定定位小技巧: 固定在版心左侧位置 ​

3.2 堆叠顺序（z-index） ​

4.定位(position)的拓展 ​

4.1 绝对定位的盒子居中 ​

4.1 定位特殊特性 ​

1.定位介绍

1.1 为什么使用定位

1.2 定位组成

1.2.1 定位模式

1.2.2 边偏移

1.3 定位模式介绍

1.3.1 静态定位(static) - 了解

1.3.2 相对定位(relative) - 重要

1.3.3 绝对定位(absolute) - 重要

1.3.3.1 绝对定位的介绍

1.3.3.2 定位口诀 —— 子绝父相

1.3.4 绝对定位(absolute) - 重要

1.3.5 粘性定位(sticky) - 了解

1.4 定位总结

2.综合案例: 学成在线-hot模块添加

3.定位(position)的应用

3.1 固定定位小技巧: 固定在版心左侧位置

3.2 堆叠顺序（z-index）

4.定位(position)的拓展

4.1 绝对定位的盒子居中

4.1 定位特殊特性