css-3-定位

最新推荐文章于 2023-12-20 15:49:34 发布

Sallery

最新推荐文章于 2023-12-20 15:49:34 发布

阅读量190

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/Sallery/article/details/118313156

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

定位：

position：默认是static不移动

static 静态定位，也就是没有定位

relative 相对定位：相对于他原来的位置进行移动，不会脱离标准文档流，依然会占据原来的位置

absolute 绝对定位：相对于定位了的父元素或者祖先元素进行定位，会脱离文档流，一般子元素绝对定位，父元素相对定位

fixed 固定定位：相对于浏览器的可视窗口进行定位，脱离标准文档流，不随滚动条滑动而滑动

sticky 粘性定位：当元素到达指定位置时，不随着滑动而滑动了，不到达指定位置时不会脱离文档流

垂直水平居中：

left: calc(50% - width/2px);
top: calc(50% - heigth/2px);

延伸：

绝对定脱离了文档流，一个元素可以被另外一个元素覆盖，造成了层的效果，就有了Z轴的概念

同级别控制谁的层最高使用 z-index= 当元素的这个值谁最大谁就显示在最前面

不同级别的元素就看谁的父元素或者祖先元素层数高

例：当绿色元素的z-index=2另外两个是默认的效果

绝对定位例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.parent{
				width: 400px;
				height: 400px;
				background-color: aliceblue;
				border: 10px;
				margin: 20px;
				padding: 20px;
				position: relative;
			}
			.child1{
				width: 100px;
				height: 100px;
				background-color: #FFC0CB;
				position: absolute;
				left: 0;
				top: 0;
				/* 相对定位和border对齐并覆盖border */
			}
			.child2{
				width: 100px;
				height: 100px;
				background-color: aqua;
			}
		</style>
	</head>
	<body>
		<div class="parent">
			<div class="child1"></div>
			<div class="child2"></div>
		</div>
	</body>
</html>

absolute效果

绝对定位 left 0 top 0 是紧贴着父元素的border的

固定定位例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.d1{
				width: 200px;
				height: 200px;
				background-color: #0000FF;
				position: fixed;
				/* right: 10px;
				top: 50% ;
				margin-top: -100px; */
				left: calc(50% - 100px);
				top: calc(50% - 100px);
				
			
			}
		</style>
	</head>
	<body>
		<div class="d1">1</div>
		<div class="d2">2</div>
		<div class="d3">3</div>
		<div class="d4">4</div>
		<div class="d5">5</div>
		<div class="d6">6</div>
		<div class="d7">7</div>
		<div class="d8">8</div>
		<div class="d9">9</div>
		<div class="d10">10</div>
		<div class="d11">11</div>
		<div class="d12">12</div>
		<div class="d13">13</div>
		<div class="d14">14</div>
		<div class="d15">15</div>
		<div class="d16">16</div>
		<div class="d17">17</div>
		<div class="d18">18</div>
		<div class="d19">19</div>
		<div class="d20">20</div>
		<div class="d21">21</div>
		<div class="d22">22</div>
		<div class="d23">23</div>
		<div class="d24">24</div>
		<div class="d25">25</div>
		<div class="d26">26</div>
		<div class="d27">27</div>
		<div class="d28">28</div>
		<div class="d29">29</div>
		<div class="d30">30</div>
		<div class="d31">31</div>
		<div class="d32">32</div>
		<div class="d33">33</div>
		<div class="d34">34</div>
		<div class="d35">35</div>
		<div class="d36">36</div>
		<div class="d37">37</div>
		<div class="d38">38</div>
		<div class="d39">39</div>
		<div class="d40">40</div>
		<div class="d41">41</div>
		<div class="d42">42</div>
		<div class="d43">43</div>
		<div class="d44">44</div>
		<div class="d45">45</div>
		<div class="d46">46</div>
		<div class="d47">47</div>
		<div class="d48">48</div>
		<div class="d49">49</div>
		<div class="d50">50</div>
		<div class="d51">51</div>
		<div class="d52">52</div>
		<div class="d53">53</div>
		<div class="d54">54</div>
		<div class="d55">55</div>
		<div class="d56">56</div>
		<div class="d57">57</div>
		<div class="d58">58</div>
		<div class="d59">59</div>
		<div class="d60">60</div>
		<div class="d61">61</div>
		<div class="d62">62</div>
		<div class="d63">63</div>
		<div class="d64">64</div>
		<div class="d65">65</div>
		<div class="d66">66</div>
		<div class="d67">67</div>
		<div class="d68">68</div>
		<div class="d69">69</div>
		<div class="d70">70</div>
		<div class="d71">71</div>
		<div class="d72">72</div>
		<div class="d73">73</div>
		<div class="d74">74</div>
		<div class="d75">75</div>
		<div class="d76">76</div>
		<div class="d77">77</div>
		<div class="d78">78</div>
		<div class="d79">79</div>
		<div class="d80">80</div>
		<div class="d81">81</div>
		<div class="d82">82</div>
		<div class="d83">83</div>
		<div class="d84">84</div>
		<div class="d85">85</div>
		<div class="d86">86</div>
		<div class="d87">87</div>
		<div class="d88">88</div>
		<div class="d89">89</div>
		<div class="d90">90</div>
		<div class="d91">91</div>
		<div class="d92">92</div>
		<div class="d93">93</div>
		<div class="d94">94</div>
		<div class="d95">95</div>
		<div class="d96">96</div>
		<div class="d97">97</div>
		<div class="d98">98</div>
		<div class="d99">99</div>
	</body>
</html>

粘性定位例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.d20{
				position: sticky;
				top: 30px;
				background-color: #0000FF;
			}
		</style>
	</head>
	<body>
		<div class="d1">dd1</div>
		<div class="d2">dd2</div>
		<div class="d3">dd3</div>
		<div class="d4">dd4</div>
		<div class="d5">dd5</div>
		<div class="d6">dd6</div>
		<div class="d7">dd7</div>
		<div class="d8">dd8</div>
		<div class="d9">dd9</div>
		<div class="d10">dd10</div>
		<div class="d11">dd11</div>
		<div class="d12">dd12</div>
		<div class="d13">dd13</div>
		<div class="d14">dd14</div>
		<div class="d15">dd15</div>
		<div class="d16">dd16</div>
		<div class="d17">dd17</div>
		<div class="d18">dd18</div>
		<div class="d19">dd19</div>
		<div class="d20">dd20</div>
		<div class="d21">dd21</div>
		<div class="d22">dd22</div>
		<div class="d23">dd23</div>
		<div class="d24">dd24</div>
		<div class="d25">dd25</div>
		<div class="d26">dd26</div>
		<div class="d27">dd27</div>
		<div class="d28">dd28</div>
		<div class="d29">dd29</div>
		<div class="d30">dd30</div>
		<div class="d31">dd31</div>
		<div class="d32">dd32</div>
		<div class="d33">dd33</div>
		<div class="d34">dd34</div>
		<div class="d35">dd35</div>
		<div class="d36">dd36</div>
		<div class="d37">dd37</div>
		<div class="d38">dd38</div>
		<div class="d39">dd39</div>
		<div class="d40">dd40</div>
		<div class="d41">dd41</div>
		<div class="d42">dd42</div>
		<div class="d43">dd43</div>
		<div class="d44">dd44</div>
		<div class="d45">dd45</div>
		<div class="d46">dd46</div>
		<div class="d47">dd47</div>
		<div class="d48">dd48</div>
		<div class="d49">dd49</div>
		<div class="d50">dd50</div>
		<div class="d51">dd51</div>
		<div class="d52">dd52</div>
		<div class="d53">dd53</div>
		<div class="d54">dd54</div>
		<div class="d55">dd55</div>
		<div class="d56">dd56</div>
		<div class="d57">dd57</div>
		<div class="d58">dd58</div>
		<div class="d59">dd59</div>
		<div class="d60">dd60</div>
		<div class="d61">dd61</div>
		<div class="d62">dd62</div>
		<div class="d63">dd63</div>
		<div class="d64">dd64</div>
		<div class="d65">dd65</div>
		<div class="d66">dd66</div>
		<div class="d67">dd67</div>
		<div class="d68">dd68</div>
		<div class="d69">dd69</div>
		<div class="d70">dd70</div>
		<div class="d71">dd71</div>
		<div class="d72">dd72</div>
		<div class="d73">dd73</div>
		<div class="d74">dd74</div>
		<div class="d75">dd75</div>
		<div class="d76">dd76</div>
		<div class="d77">dd77</div>
		<div class="d78">dd78</div>
		<div class="d79">dd79</div>
		<div class="d80">dd80</div>
		<div class="d81">dd81</div>
		<div class="d82">dd82</div>
		<div class="d83">dd83</div>
		<div class="d84">dd84</div>
		<div class="d85">dd85</div>
		<div class="d86">dd86</div>
		<div class="d87">dd87</div>
		<div class="d88">dd88</div>
		<div class="d89">dd89</div>
		<div class="d90">dd90</div>
		<div class="d91">dd91</div>
		<div class="d92">dd92</div>
		<div class="d93">dd93</div>
		<div class="d94">dd94</div>
		<div class="d95">dd95</div>
		<div class="d96">dd96</div>
		<div class="d97">dd97</div>
		<div class="d98">dd98</div>
		<div class="d99">dd99</div>
		<div class="d100">dd100</div>
	</body>
</html>