2021-02-25

最新推荐文章于 2024-10-06 23:37:55 发布

hanshuanga

最新推荐文章于 2024-10-06 23:37:55 发布

阅读量85

点赞数

文章标签：定位 css

本文链接：https://blog.csdn.net/hanshuanga/article/details/114056504

版权

定位

今天来说说CSS定位position
position:用来定位一个元素在页面的位置，适合微调，position有五个属性值，分别来看一下
position：static | fixed | absoluate | relative | sticky
static：position的默认取值，元素会按正常的文档流的形式分布
注意：这时的left，top，bottom，right无效
fixed：称固定定位，元素的位置是按照浏览器窗口而定的，导致页面元素位置不会随浏览器的滚动而变化
absoluate:绝对定位，相对于有定位的最近的上一级元素发生变化，注意，绝对定位完全脱离文档流，不会占据页面任何位置，即他可能会和其他元素发生重叠，通常搭配left，right，top，bottom使用
relative：相对定位，他是相对于自身元素的正常显示位置而定，他是占据位置的，即即使位置发生偏移，原来的位置也会被占据，通常搭配left，right，top，bottom使用

子绝父相

即子级使用绝对定位，父级使用相对定位，因为绝对定位是脱离文档流的，所以可以定位在页面任一位置，但是如果父级元素都没有定位，那么就会以浏览器为基准，所以需要一个有定位的父级元素，而父级元素若采用绝对定位，固定定位，就就会又出现上述问题，所以我们需要一个可以占据位置的定位，那么毫无疑问，相对定位就是最佳选择
重头戏来了来了
粘性定位：sticky
他很像relative和fixed的结合，产生一定的动态效果，sticky生效的前提是要结合top，left，bottom，right使用，元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位，这个特定阈值指的是 top, right, bottom 或 left 之一

<style>
       .box{
         display: flex;
         flex-direction: column;
       }
       
       .sticky{
       	font-size: 25px;
       	 position: sticky;
         left:10px;
         top:50px;
         color:orange;
       }
   </style>
</head>
<body>
	<div class="box">
        <a href="">1</a>
        <a href="">2</a>
        <a href="">3</a>
        <a href="">4</a>
        <a href="">5</a>
        <a href="">6</a>
        <a href="">7</a>
        <a href="" class='sticky'>8</a>
        <a href="">9</a>
        <a href="">10</a>
        <a href="">11</a>
        <a href="">12</a>
        <a href="">13</a>
        <a href="">14</a>
        <a href="">15</a>
        <a href="">16</a>
        <a href="">17</a>
        <a href="">18</a>
        <a href="">19</a>
        <a href="">20</a>
        <a href="">21</a>
        <a href="">22</a>
        <a href="">23</a>
        <a href="">24</a>
        <a href="">25</a>
        <a href="">26</a>
        <a href="">27</a>
        <a href="">28</a>
        <a href="">29</a>
        <a href="">30</a>
        <a href="">31</a>
        <a href="">32</a>
        <a href="">33</a>
        <a href="">34</a>
        <a href="">35</a>
        <a href="">36</a>
        <a href="">37</a>
        <a href="">38</a>
        <a href="">39</a>
        <a href="">40</a>
        <a href="">41</a>
        <a href="">42</a>
        <a href="">43</a>
        <a href="">44</a>
        <a href="">45</a>
        <a href="">46</a>
        <a href="">47</a>
        <a href="">48</a>
        <a href="">49</a>
        <a href="">50</a>
        <a href="">51</a>
        <a href="">52</a>
        <a href="">53</a>
        <a href="">54</a>
        <a href="">55</a>
        <a href="">56</a>
        <a href="">57</a>
        <a href="">58</a>
        <a href="">59</a>
        <a href="">60</a>
        <a href="">61</a>
        <a href="">62</a>
        <a href="">63</a>
        <a href="">64</a>
        <a href="">65</a>
        <a href="">66</a>
        <a href="">67</a>
        <a href="">68</a>
        <a href="">69</a>
        <a href="">70</a>
        <a href="">71</a>
        <a href="">72</a>
        <a href="">73</a>
        <a href="">74</a>
        <a href="">75</a>
        <a href="">76</a>
        <a href="">77</a>
        <a href="">78</a>
        <a href="">79</a>
        <a href="">80</a>
        <a href="">81</a>
        <a href="">82</a>
        <a href="">83</a>
        <a href="">84</a>
        <a href="">85</a>
        <a href="">86</a>
        <a href="">87</a>
        <a href="">88</a>
        <a href="">89</a>
        <a href="">90</a>
        <a href="">91</a>
        <a href="">92</a>
        <a href="">93</a>
        <a href="">94</a>
        <a href="">95</a>
        <a href="">96</a>
        <a href="">97</a>
        <a href="">98</a>
        <a href="">99</a>
        <a href="">100</a>
	</div>
</body>

今天的都到这，想到哪写到哪，不对请指出，共同学习，谢谢