1.定位核心基础定位模式有五种分别为static静态定位relative相对定位absolute绝对定位fixed固定定位sticky粘性定位五种定位解析一. 静态定位1.所有元素默认定位方式2.完全遵循标准文档流从上到下从左到右排列3.不脱离文档流正常占位4.top/left等属性失效二. 相对定位1.相对于自身位置移动距离2.不脱离正常流元素原位置仍被保留其他元素按照原布局排列3.可以通过topbottomleftright属性来调整元素位置4.top比bottomleft比right优先级高常用于给绝对定位元素做父级定位容器三绝对定位1.元素脱离正常流元素位置不被保留其他元素按照原布局排列2.可以通过topbottomleftright属性来调整元素位置3.top比bottomleft比right优先级高4.定位参照最近一级的非static的父级元素没有则以视口你看见的屏幕为准四固定定位1.完全脱离文档流不占位置2.定位以视口为标准3.页面移动的时候元素的位置不会随着页面移动而移动4.不受任何父元素定位的影响五粘性定位1.特点是相对固定定位2.默认跟随文档流3.滚动到阈值后固定移动页面起初会随着页面自身位置变化但是到达一定程度就不会变了4.必须设置top/left等值才会生效六子绝父相这是前端布局里面常用的布局即子元素绝对定位父元素相对定位核心原理父级不脱离文档流保留原有位置只充当定位参照物不破坏整体页面布局子级脱离文档流自由摆放按照父盒子四个角定位七层叠顺序index数值1.值类型整数或者suto数值越大层级越高2.默认值auto等于未设置后出现的元素覆盖前者3.生效条件仅对定位元素生效对static静态定位无效上面是设置不同图片的不同index值以实现层叠效果
