HTML基础知识（五）—

一、定位

1、常见的定位布局有float布局，position布局，flex（弹性盒子）布局。
position布局，定位布局。

2、定位布局：定位指的是指定一个元素在网页上的位置；

3、一共有5种定位方式，也就是说position属性主要有五个值：

（1）static

（2）relative

（3）fixed

（4）absolute

（5）sticky （最后一个sticky是2017年浏览器才支持的。）

（这些值的存在是用来进行元素的位置的定义,然后借助**top**,**bottom**,**left**,**right**四个属性值，对元素的位置进行更精确的定位。）

二、static 静态定位

1、static 是position属性的默认值，如果省略position属性，浏览器就认为是static定位；浏览器会按照源码的顺序，决定每个元素的位置,这称为"正常文本流"（normal flow）。每个块级元素占据自己的区块（block）,元素与元素之间不产生重叠。

2、static也称为静态定位，实际上是不做定位。

注意:static定位所导致的元素位置，是浏览器自主决定的,所以top、bottom、left、right这四个属性值无效。

三、fixed 固定定位

1、fixed 表示，相对于视口（viewport，浏览器窗口|可视窗口）进行偏移，即定位基点是浏览器的可视窗口.这会导致元素的位置不会随页面滚动而变化，好像固定在网页上一样。

2、它要搭配top、bottom、left、right这四个属性一起使用，表示元素的初始位置是基于viewport计算的，否则初始位置就是元素的默认位置。

3、元素设置使用fixed定位之后，在网页的普通文档流中不占空间,元素的层级要高于普通文档流。

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head>
<body><style>.box{width:400px;height: 300px;background: red;border: 2px solid black;position: fixed;right:0;bottom:0;}.child{height:200px;border: 2px solid blue;margin:10px;}</style><div class="box"></div><div class="child">1</div><div class="child">2</div><div class="child">3</div><div class="child">4</div>
</body>
</html>

四、relative 相对定位

1、relative表示，相对于默认位置（即static时的位置）进行偏移，即定位的基点是元素的默认位置。

2、它必须搭配top、bottom、left、right这四个属性一起使用，用来指定偏移的方向和距离。

3、使用relative定位后，元素在网页的普通文档流中依然占空间；元素层级比普通文档流更高。

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head>
<body><style>.fbox{border: 3px solid black;}.fbox>.box{width:340px;height: 260px;border: 6px solid red;display: inline-block;}.fbox>.box2{position: relative;left:170px;top:130px;background: yellow;}</style><div class="fbox"><div class="box">1</div><div class="box box2">2</div><div class="box box3">3</div> </div>
</body>
</html>

五、absolute 绝对定位

1、absolute相对于上级元素(一般是父元素)进行偏移，即定位基点是父元素。

2、它有一个重要的限制条件：定为基点（一般是父元素）不能是static定位，否则定位基点就会变成整个网页的根元素html。另外absolute定位必须搭配

3、top、bottom、left、right这四个属性一起使用。

4、小结：absolute是相对于离自己最近的做过非static定位的父元素。absolute定位的元素会被‘’正常页面流“忽略，即在正常页面流中不占空间，周边元素不受影响。

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body>div{height:600px;}.fbox{margin: 100px;background:red;padding: 100px;position: relative;}.fbox>.box{width:440px;height: 500px;background:pink;padding:80px;position: relative;border:3px solid black;display:inline-block;vertical-align: top;}.box>.item{width:200px;height: 200px;display:inline-block;background:yellow;border:3px solid #fff;}.box>.child2{width:250px;height: 250px;background:yellowgreen;position: absolute;left:150px;top:150px;}.fbox1{background:green;}.box>.child1{position: absolute;left: 0px;top:0px;z-index: 4;}.box>.child3{background: grey;z-index: -3;position: relative;}</style>
</head>
<body><div class="fbox"><div class="box"><div class="item child1">1</div><div class="item child2">2</div><div class="item child3">3</div></div><div class="box"></div></div><div class="fbox1"></div>
</body>
</html>

六、z-index用来调整元素的层级高低。

ps：1、普通文档流的元素默认层级为0，使用浮动和position定位（除static）之后的元素，默认层级高于普通级（高半级，介于0~1之间），可以使用z-index设置使用过position定位的元素和层级高低，数值越大，层级越高，若数值小于0则比普通元素的层级更低。

2、普通元素设置z-index无效。

七、sticky（粘性定位）

1、sticky跟前面四个属性都不一样，它会产生一些动态效果，很像relative和fixed的结合：一些时候是relative定位（定位基点是自身默认），另一些时候自动变成fixed定位（定位基点是视口）；因此能够形成“动态固定”效果。

2、sticky生效的前提，必须搭配：top,bottom,left,right

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>header{height: 300px;border:3px solid black;position: relative;z-index: 99;background:#ccc;}.search{width:500px;height: 80px;background:red; margin-top:120px;margin-left: 400px;position: -webkit-sticky;position: sticky;top:20px;z-index: 99;}.container{height: 1300px;background:orange;border: 4px solid black;}</style>
</head>
<body><div class="search"></div><div class="container"><h3>标题1</h3><h3>标题1</h3><h3>标题1</h3><h3>标题1</h3><h3>标题1</h3><h3>标题1</h3><h3>标题1</h3><h3>标题1</h3><h3>标题1</h3><h3>标题1</h3><h3>标题1</h3><h3>标题1</h3><h3>标题1</h3><h3>标题1</h3><h3>标题1</h3><h3>标题1</h3></div>
</body>
</html>