css的定位与区别（绝对定位、相对定位、固定定位）
以下⽂章为⼀些css部分代码的简单说明
⾸先是定位，这是css中重要的属性
定位:
position:static(静态定位)|relative(相对定位)|absolute(绝对定位)|fixed(固定定位)
html空心圆圈
相对定位:  移动后，依然占⽤标准⽂档流，原位也依然占位html+css网页设计作业
position和location的区别
实例:(其他定位格式类似)
py 字符串转数字position: relative;  位置 ：相对的 (有⽗元素就优先相对于⽗元素移动,⽆⽗元素则相对于⾃⾝移动)
top|bottom|left|right: 2px;  相对的⽅向：数值
绝对定位(⼆级分类/⼦菜单...)：脱离⽂档流(不占位，浮动) 默认情况下相对于⾃⾝移动，如⽗元素或者祖先元素存在相对定位的时候，绝对元素将依赖相对元素来进⾏定位
position:absolute;
固定定位(顶部导航条...)：依赖浏览器窗⼝  脱离⽂档流
monitor命令position:fixed
从上⾯这四个我们可以得知，绝对定位是相对于整个⽂档或者最近⼀个有定位的⽗元素的，这种定位会导致元素会脱离⽂档流，浮动于⽂档的上⽅，不再占⽤⽂档⾥的位置，会随着⽂档或者有定位的⽗元素位置发⽣移动。
相对定位是相对于元素⾃⾝的原位置进⾏移动，不会脱离⽂档流，要注意的是，其原位置依然会继续占⽤⽂档位置。
delay组合
固定定位就更简单了，是相对于屏幕进⾏定位的，元素会⼀直在屏幕的这个位置，都固定了，不会随着⽂档流发⽣位移，那么他肯定也会脱离⽂档流，不会随着⽂档流发⽣变化，也不会在⽂档中占⽤位置。
说完了这三个定位的区别，有时候我们会发现两个加了绝对absolute的元素，会引发⼀个盖住另⼀个，或者⼀个定位为absolute的元素挡住有fixed的元素的情况，这种情况的原因是在⽂档上⾯，是按Z轴进⾏堆叠的，可以理解为ps⾥的图层，类似于⽆数透明玻璃相互重叠在⼀起，其中⽂档流就处于Z轴为0的那块玻璃上，⽽定位为absolute或者ficed的元素在Z轴上是处于⼤于0的玻璃上的，当⼀个basolu
te元素⽐另⼀些元素在Z轴上的位置更⼤时，也就会更靠上，最终就会引起⼀个盖住另⼀个的情况。
理解了这个原理之后，我们显然可以通过调节元素在Z轴上的位置去进⾏调节了，其代码为：
z-index:number
其number是⼀个number数值，表达为其在Z轴上的位置。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。