12·灵魂前端工程师养成-CSS定位

DriverZeng

发布于 2022-09-26 16:53:32

4290

发布于 2022-09-26 16:53:32

文章被收录于专栏：Linux云计算及前后端开发

CSS定位介绍

层叠上下文 z-index

-曾老湿, 江湖人称曾老大。

-多年互联网运维工作经验，曾负责过大规模集群架构自动化运维管理工作。 -擅长Web集群架构与自动化运维，曾负责国内某大型金融公司运维工作。 -devops项目经理兼DBA。 -开发过一套自动化运维平台（功能如下）： 1)整合了各个公有云API，自主创建云主机。 2)ELK自动化收集日志功能。 3)Saltstack自动化运维统一配置管理工具。 4)Git、Jenkins自动化代码上线及自动化测试平台。 5)堡垒机，连接Linux、Windows平台及日志审计。 6)SQL执行及审批流程。 7)慢查询日志分析web界面。

CSS定位介绍

布局和定位的区别

布局是屏幕平面上的，定位是垂直于屏幕的。

还得从文档流和盒模型说起。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="demo">你好</div>
</body>
</html>

.demo{
  box-sizing: border-box;
  margin: 12px;
  border: 5px solid red;
  padding: 22px;
  width: 100px;
  height: 100px;
  background: blue;
  color: white;
}

此时盒模型，加了背景颜色为蓝色： 1.蓝色的范围，是红色围成的内部区域？ 2.蓝色的范围，是包括红色边框的区域？

我们将边框的颜色修改为半透明，不难发现...

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="demo">你好</div>
</body>
</html>

.demo{
  box-sizing: border-box;
  margin: 12px;
  border: 5px solid rgba(255,0,0,0.3);
  padding: 22px;
  width: 100px;
  height: 100px;
  background: blue;
  color: white;
}

如果从左边，看div是什么样子的？类似于图层...背景在最下面一层

代码验证：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>

<body>
  <div class="demo">
    <span class='text'>你好</span>
  </div>
</body>

</html>

.demo{
  box-sizing: border-box;
  margin: 12px;
  border: 5px solid rgba(255,0,0,1);
  padding: 22px;
  width: 100px;
  height: 100px;
  background: blue;
  color: green;
}

.text{
  font-size:100px;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="demo">
    <div class="float">浮动文字</div><span class=text>■你好</span>
    <div class="childDiv">测试</div>
  </div>
</body>
</html>

.demo{
  background: rgb(120, 184, 211);
  width: 200px;
  height: 200px;
  border: 15px solid rgba(255,0,0,0.2);
  padding: 10px;
  
}
.childDiv{
  background: #fff;
  height: 50px;
  color:red;
}

.float{
  float: left;
  background: green;
  height: 50px;
  width: 50px;
  color: red;
}

.text{
  margin-left: -10px;
  
}

position

新属性：position

1.static：默认值，待在文档流里，这里可以不写

2.relative：相对定位，升起来，但不脱离文档流

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="container clearfix">
    <div class="demo"></div>
    <div class="demo2"></div>
  </div>
</body>
</html>

*{box-sizing: border-box;}

.container{
  border: 1px solid red;
  height: 300px;
}

.clearfix{
  content: '';
  clear: both;
  display: block;
}

.demo{
  border: 1px solid green;
  background: green;
  width: 50px;
  height: 50px;
  position: relative;
  top: 10px;
  z-index: 0;
}

.demo2{
  background: black;
  width: 50px;
  height: 50px;
  position: relative;
}

3.absolute：绝对定位，定位基准是祖先里的非static

使用场景，关闭按钮

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="container clearfix">
    <div class="demo"></div>
    <div class="demo2"></div>
    <span class='close'>X</span>
  </div>
</body>
</html>

*{box-sizing: border-box;}

.container{
  border: 1px solid red;
  height: 300px;
  position: relative;
}

.clearfix{
  content: '';
  clear: both;
  display: block;
}

.demo{
  border: 1px solid green;
  background: green;
  width: 50px;
  height: 50px;
  position: relative;
  top: 10px;
  z-index: 0;
}

.demo2{
  background: black;
  width: 50px;
  height: 50px;
  position: relative;
  z-index: 0;
}

.close{
  position: absolute;
  top: 0;
  right: 0;
  padding: 0 8px;
  background: blue;
  color: white;
}

鼠标提示

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="container clearfix">
    <div class="demo"></div>
    <div class="demo2"></div>
    <div style='height: 100px;'></div>
    <span class='close'>X</span>
    <button>点击
      <span class='tips'>提示内容</span>
    </button>
  </div>
</body>
</html>

*{box-sizing: border-box;}

.container{
  border: 1px solid red;
  height: 300px;
  position: relative;
  padding: 20px;
}

.clearfix:after{
  content: '';
  clear: both;
  display: block;
}

.demo{
  border: 1px solid green;
  background: green;
  width: 50px;
  height: 50px;
  position: relative;
  top: 10px;
  z-index: 0;
}

.demo2{
  background: black;
  width: 50px;
  height: 50px;
  position: relative;
  z-index: 0;
}

.close{
  position: absolute;
  top: 0;
  right: 0;
  padding: 0 8px;
  background: blue;
  color: white;
}

button{
  position: relative;
}

button>span{
  position: absolute;
  border: 1px solid red;
  /*文字内容不准换行*/
  white-space: nowrap;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
}

button span{
  display: none;
}

button:hover span{
  display: inline-block;
}

4.fixed：固定定位，定位基准是viewport

使用场景：烦人的广告和返回顶部按钮

5.sticky：粘滞定位，不好描述，直接举例

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>

<body>
  <div class="container">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <p>6</p>
    <p>7</p>
    <p>8</p>
    <p>9</p>
    <p>10</p>
    <p>11</p>
    <p>12</p>
    <p>13</p>
    <div class="sticky">我是个导航</div>
    <p>14</p>
    <p>15</p>
    <p>16</p>
    <p>17</p>
    <p>18</p>
    <p>19</p>
    <p>20</p>
    <p>21</p>
    <p>22</p>
    <p>23</p>
    <p>24</p>
    <p>25</p>
    <p>26</p>
    <p>27</p>
    <p>28</p>
    <p>29</p>
    <p>30</p>
    <p>31</p>
    <p>32</p>
    <p>33</p>
    <p>34</p>
    <p>35</p>
    <p>36</p>
    <p>37</p>
    <p>38</p>
    <p>39</p>
    <p>40</p>
    <p>41</p>
    <p>42</p>
    <p>43</p>
    <p>44</p>
    <p>45</p>
    <p>46</p>
    <p>47</p>
    <p>48</p>
    <p>49</p>
    <p>50</p>
    <p>51</p>
    <p>52</p>
    <p>53</p>
    <p>54</p>
    <p>55</p>
    <p>56</p>
    <p>57</p>
    <p>58</p>
    <p>59</p>
    <p>60</p>
    <p>61</p>
    <p>62</p>
    <p>63</p>
    <p>64</p>
    <p>65</p>
    <p>66</p>
    <p>67</p>
    <p>68</p>
    <p>69</p>
    <p>70</p>
    <p>71</p>
    <p>72</p>
    <p>73</p>
    <p>74</p>
    <p>75</p>
    <p>76</p>
    <p>77</p>
    <p>78</p>
    <p>79</p>
    <p>80</p>
    <p>81</p>
    <p>82</p>
    <p>83</p>
    <p>84</p>
    <p>85</p>
    <p>86</p>
    <p>87</p>
    <p>88</p>
    <p>89</p>
    <p>90</p>
    <p>91</p>
    <p>92</p>
    <p>93</p>
    <p>94</p>
    <p>95</p>
    <p>96</p>
    <p>97</p>
    <p>98</p>
    <p>99</p>
    <p>100</p>
    <div class="fixed">返回顶部</div>
  </div>
</body>

</html>

*{box-sizing: border-box;}

.container{
  border: 1px solid red;
  position: relative;
  padding: 20px;
}

.fixed{
  border: 1px solid green;
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}



.sticky{
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  border: 1px solid green;
  background: green;
}

经验：如果写了absolute，一般都得补一个relative 如果写了absolute或fixed，一定要补top和left sticky兼容性很差，主要用于面试装逼

层叠上下文 z-index

每个层叠上下文，就是一个新的小世界（作用域），这个小世界里面的z-index跟外界无关，处在同一个小世界的z-index才能比较。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>

<body>
  <div class="container">
    <div class="a">1
      <div class="a2">10</div>
    </div>
    <div class="b">
      <div class="b2">5</div>
    </div>
  </div>
</body>

</html>

*{margin:0;padding:0;box-sizing:border-box;}

.container{
  border: 1px solid black;
  height: 200px;
  background: rgba(255,255,0,0.5)
  position: relative;
}

.a{
  position: relative;
  z-index: 1;
  border: 1px solid red;
}

.a2{
  position: relative;
  z-index: 10;
  height: 50px;
  width: 50px;
  background: red; 
}

.b{
 
}

.b2{
  position: relative;
  z-index: 5;
  height: 50px;
  width: 50px;
  top: -20px;
  background: blue;
  color: white;
}

还有哪些属性可以创建层叠上下文？

文档中的层叠上下文由满足以下任意一个条件的元素形成：

1.文档根元素（）；

2.position 值为 absolute（绝对定位）或 relative（相对定位）且 z-index 值不为 auto 的元素；

3.position 值为 fixed（固定定位）或 sticky（粘滞定位）的元素（沾滞定位适配所有移动设备上的浏览器，但老的桌面浏览器不支持）；

4.flex (flexbox) 容器的子元素，且 z-index 值不为 auto；

5.grid (grid) 容器的子元素，且 z-index 值不为 auto；

6.opacity 属性值小于 1 的元素（参见 the specification for opacity）；

7.mix-blend-mode 属性值不为 normal 的元素；

8.以下任意属性值不为 none 的元素： transform filter perspective clip-path mask / mask-image / mask-border

9.isolation 属性值为 isolate 的元素；

10.-webkit-overflow-scrolling 属性值为 touch 的元素；