CSS——静态定位，相对定位，绝对定位，固定定位
CSS中的定位使⽤来布局的熟练应⽤对页⾯美化有很好的帮助，下⾯就进⾏详细介绍：定位分为静态定位，相对定位，绝对定位，固定定位这四种，定位有不同的参数，例如：left、right、top、bottom、z-index等。
1、静态定位（static）
⼀般的标签元素不加任何定位属性都属于静态定位，在页⾯的最底层属于标准流。
2、绝对定位（absolute）
绝对定位的元素从⽂档流中拖出，使⽤left、right、top、bottom等属性相对于其最接近的⼀个最有定位设置的⽗级元素进⾏绝对定位，如果元素的⽗级没有设置定位属性，则依据 body 元素左上⾓作为参考进⾏定位。绝对定位元素可层叠，层叠顺序可通过 z-index 属性控制，z-index值为⽆单位的整数，⼤的在上⾯，可以有负值。
css固定定位绝对定位的定位⽅法：如果它的⽗元素设置了除static之外的定位，⽐如position:relative或position:absolute及position:fixed，那么它就会相对于它的⽗元素来定位，位置通过left , top ,right ,bottom属性来规定，如果它的⽗元素没有设置定位，那么就得看它⽗元素的⽗元素是否有设置定位，如
果还是没有就继续向更⾼层的祖先元素类推，总之它的定位就是相对于设置了除static定位之外的定位的第⼀个祖先元素，如果所有的祖先元素都没有以上三种定位中的其中⼀种定位，那么它就会相对于⽂档body来定位（并⾮相对于浏览器窗⼝，相对于窗⼝定位的是fixed）。
将class="two"的div定位到距离的顶部和左侧分别50px的位置。会改变其他元素的布局，不会在此元素本来位置留下空⽩。
3、相对定位（relative）
相对定位元素不可层叠，依据left、right、top、bottom等属性在正常⽂档流中偏移⾃⾝位置。同样可以⽤z-index分层设计。
将class="two"的div定位到距离它本来位置的顶部和左侧分别50px的位置。不会改变其他元素的布局，会在此元素本来位置留下空⽩。
4、固定定位（fixed）
固定定位与绝对定位类似，但它是相对于浏览器窗⼝定位，并且不会随着滚动条进⾏滚动。
固定定位的最常见的⼀种⽤途是在页⾯中创建⼀个固定头部、固定脚部或者固定侧边栏，不需使⽤margin、border、padding。
5、绝对定位vs相对定位
绝对定位好像把不同元素安排到了⼀栋楼的不同楼层(除⾸层，⽂本流放在⾸层)，它们之间互不影响；相对定位元素在⾸层，与⽂本流⼀起存放，它们之间互相影响。
被设置了绝对定位的元素，在⽂档流中是不占据空间的，如果某元素设置了绝对定位，那么它在⽂档流中的位置会被删除，它浮了起来，其实设置了相对定位也会让元素浮起来，但它们的不同点在于，相对定位不会删除它本⾝在⽂档流中占据的空间，其他元素不可以占据该空间，⽽绝对定位则会删除掉该元素在⽂档流中的位置，使其完全从⽂档流中抽了出来，其他元素可以占据其空间，可以通过z-index来设置它们的堆叠顺序。

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