CSS-position 红太狼 2022-09-30 06:28 164阅读 0赞 我们先来看看position这个属性 1.static（静态定位）它是position 的默认值，任意的position:static的元素是不会被特殊定位的。它表示的是出现的正常的流中（忽略了top,left,right,bottom或者是z-index的声明，如果使用了position:static的话，以上说的属性就是不会起作用的。） 2.relative（相对定位）：relative表现是和static是一样的，除非我们自己添加一些额外的属性。它是生成相对定位的元素，通过top,bottom,left,right的设置相对于其正常（原先本身的）位置进行定位的。就是总的来说是根据自己本身的定位相对移动的。并且是可以通过z-index来进行层次的分级。虽然定位为relative的元素是会偏离正常的文本流当中，但是其在文本流位置是依然存在的。其他的元素是不会受该元素的影响的，浏览器中还是会给这个偏离正常流元素一个位置。 ![Center][] 接下来我将会附上一些代码。 <style> .relative1 \{ position: relative; border:1px black solid; \} .relative2 \{ position: relative; top: 20px; left: 20px; background-color: white; width:100px; height:100px; border:1px red solid; \} .relative3\{ width:200px; height:100px; border:1px blue solid; position:relative; \} </style> </head> <body> <div class="relative1"> relative1 <div class="relative2"> relative2 </div> <div class="relative3"> relative3 </div> </div> 我这里设置了relativel是父元素，其他是子元素。我将父元素设置为position:relative，如果我们没有给他添加额外的属性的话，那么父元素的宽度就是撑满整个浏览器的窗口了，但是如果给父元素设置宽度的大小的话，那么宽度就不是撑满整个浏览器的窗口，所以说它跟static的表现是一样的。 但是如果父元素设置为position:absolute的话，即使没有给他设定宽度，它的宽度也不会是撑满整个浏览器窗口的。 并且当relative1是relative2的父元素，但是不是relative3的父元素的时候，就会产生这样的效果的 ![Center 1][] relative2像在漂浮在上层一样 ，所以我们是可以使用z\_index来设置分层的。 3.absolute 定位是脱离正常的文本流，与relative的区别是其在正常流中的位置是不再存在的。例如我们relativel设置为relative，relative2设置为absolute，relative3也设置为absolute，然后就会出现这个效果的。 ![Center 2][] relative2与relative3都相叠在一起，因为他们都设为position：absolute。所以他们在正常流中的位置是不再促在的，只能被其他元素占用的。 4.fixed 一个固定定位元素会相对于浏览器来定位的，这意味着如果页面滚动的话，它还是会停留在相同的位置上的，而且top,right,botton和left属性都是可以使用的。一个固定的元素是不会保留它原有的位置的，这也是脱离文本流的。 需要注意的是，父子关系是无法用z-index来设定上下关系 的，一定是子级在上父级在下。 [Center]: /images/20220708/2b2ee05e42ad490a93979f7121b0833a.png [Center 1]: /images/20220708/d23d52b23e4c42a391a012fb64254879.png [Center 2]: /images/20220708/7db1a4daf7ee4c958024981ae336a89b.png
还没有评论，来说两句吧...