【css-文档流与文本流，浮动，定位】
文章目录
- 1.文档流与文本流
-
- 1.1文档流的定义
- 1.2文本流的定义
- 1.3脱离文档流
- 2.浮动（float)
- 3.定位
-
- 3.1定位的定义
- 3.2定位的组成
- 3.3静态定位
- 3.4相对定位
- 3.5绝对定位
- 3.6固定定位
- 3.7粘性定位
- 4.z-index标签
1.文档流与文本流
1.1文档流的定义
**文档流通俗来讲是浏览器中的规则，从上到下，从左到右的布局。**
当浏览器渲染html文档时，从顶部开始开始渲染，为元素分配所需要的空间，每一个块级元素单独占一行，行内元素则按照顺序被水平渲染直到在当前行遇到了边界，然后换到下一行的起点继续渲染。那么此时就不得不说一下块级元素和行内元素。
1.2文本流的定义
是文本中的概念，只适用于文本，文本是一个大的框架，元素可能会脱离文档流但不会脱离文本流。
1.3脱离文档流
脱离文档流：简单来讲文档流属于地面，而脱离文档流的定义是脱离地面，不在一个层面上。
脱离文档流有三种形式：float浮动，定位中的absolute(绝对定位）,fixed（固定定位）,sticky（粘性定位）还有z-index标签。
2.浮动（float)
浮动是css里面布局用的最多的属性。
现在有两个div，分别设置宽高。我们知道，它们的效果如下：
<style>
.p1{
background-color: black;
width: 50px;
height: 50px;
}
.p2{
background-color: blanchedalmond;
width: 20px;
height: 20px;
}
style>
<body>
<div class="p1">div>
<div class="p2">div>
body>
此效果图
两个元素加入向左浮动
<style>
.p1{
background-color: black;
width: 50px;
height: 50px;
float: left;
}
.p2{
background-color: blanchedalmond;
width: 20px;
height: 20px;
float: left;
}
style>
此效果图
总结一下：浮动的意思时将元素放在天上，在地上的空白区域进行移动
3.定位
3.1定位的定义
浮动可以让多个块级盒子一行没有缝隙排列显示， 经常用于横向排列盒子。
定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。
3.2定位的组成
定位：将盒子定在某一个位置，所以定位也是在摆放盒子， 按照定位的方式移动盒子。
定位 = 定位模式 + 边偏移 。
定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。
| static | 静态定位 |
|---|---|
| relative | 相对定位 |
| absolute | 绝对定位 |
| fixed | 固定定位 |
| sticky | 粘性定位 |
在定位这里博主有一个更为直观的理解，在这里的文档流就好比我们要做核酸，按照正常规则 我们是每个人之间保持一米距离，然后排一列，这是默认的规矩。后边的定位将那这个例子进行阐述。
3.3静态定位
一个盒子在视图中如何去设置它的位置，一般默认是静态定位。所谓静态定位指的是：盒子在正常文档流中按照顺序排列的位置。
也就是每个人都是好市民，每个人都按照规章制度依次排列
3.4相对定位
相对定位是元素在移动位置的时候，是相对于它原来的位置来说的（自恋型）
相对定位的特点
它是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）。
原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。
因此，相对定位并没有脱标。
相对指的是 我从我当下位置出发往前走几米 或者怎样 它还在原来的队伍中 但是不影响其他元素。
<style>
#div1{
width: 100px;
height: 100px;
background-color: rgb(68, 26, 184);
}
#div2{
width: 100px;
height: 100px;
background-color: rgb(16, 238, 16);
}
#div3{
width: 100px;
height: 100px;
background-color: rgb(216, 12, 22);
}
body{
border: 10px solid red;
}
html{
border: 10px solid black;
}
style>
<body>
<div id="div1">
div>
<div id="div2">
div>
<div id="div3">
div>
body>
html>
效果图所示
加入相对定位relative
<style>
#div1{
width: 100px;
height: 100px;
background-color: rgb(68, 26, 184);
}
#div2{
width: 100px;
height: 100px;
background-color: rgb(16, 238, 16);
positon:relative;
left:100px；
}
#div3{