CSS定位 子绝父相造成的内边距失效问题

CSS中的定位

position属性规定应予元素的定位类型方法的类型。

static：

该属性为默认属性（静态）

不受top，bottom，left，right属性进行定位，不以任何特殊方式定位，始终根据页面的正常流进行定位

relative：

相对于其正常位置进行定位

设置top，bottom，left，right属性进行定位，将导致其偏离正常位置进行调整，不会对其余内容进行调整来适应元素留下的任何空间（利用此属性可以实现许多看似并不合理的要求比方说类似于榫卯结构定位的需求等），不脱离文档流

fixed：

相对于视口定位，即使滚动页面，他也始终位于同一位置

设置top，bottom，left，right属性进行定位此元素，（可以实现搜索框，右下角提示框悬浮在页面上不随文档流移动的需求）

absolute：

元素相对于最近的定位祖先元素进行定位，而不是相对于视口定位，如果绝对定位的元素没有祖先，他将使用文档主体（body），并随页面滚动一起移动，脱离文档流

sticky：

根据用户的滚动位置进行定位

粘性元素根据滚动位置在相对（relative）和固定（fixed）之间切换。起先会被相对定位（在文档流中正常），直至视口中遇到的给定的偏移位置，然后将其“粘贴”在适当位置【简单的说就是先relative后fixed。先正常后不正常】

元素是使用top，bottom，left，right，z-index属性进行定位，但是除非首先设置position属性，否则上述属性将不起作用

z-index

属性指定元素的堆栈顺序，也就是解决元素“互相遮盖”问题

相关问题：

1.相对定位不脱离文档流，绝对定位会脱离文档流

例如，在一个广告横幅中右上角的关闭按钮只能用绝对定位脱离文档流，因为用relative会占据广告本身的内容

1. 子绝父相的应用

        绝对定位需要相对于最近的定位祖先元素进行定位，他已经脱离文档流，因此需要会寻找最近开启定位的位置进行定位，由于相对定位不会丢失文档流中的位置因此在父元素中使用比较合适。

        好处就是子元素由于使用了绝对定位，他不会占有位置，可以放置在父元素盒子内任意位置不影响兄弟元素的展示

        子绝父相中padding边距失效问题

        失效原因是由于子元素abusolute脱离文档流，padding失效，原因记不清了。

解决方法：

1. 给父元素设置定死宽高（若有适配或百分比要求不适用）
2. 给子元素设置position：static或直接取消abusolute属性（默认是static），但是由于子元素使用绝对定位的用处是脱离文档流，再次使用static会在文档流中重新占有位置，可能会影响兄弟元素展示（如果只有一个儿子，目前觉得可以解决问题，没发现有其他问题）
3. 给子元素设置position：sticky，或者relative属性。要注意sticky的本身特性，先是relative后为fixed，可能会在页面上有些问题要注意（如果不设置偏移位置，没试出来有什么问题）

总结：对于独生子女的元素，上述三种方法都可以解决，但是如果有兄弟姐妹元素由于上述方法都是恢复在文档流的位置需要挤占“兄弟”之间位置，可能会造成问题，或许可以采用fixed属性想想办法，如果有更好的办法欢迎踢我。

本次是由于数字大屏中使用echarts图表，里面的tooltip每次鼠标放上去都会抖动导致的一系列问题，由于默认echarts图表的tooltip是0.4秒展现，可以将tooltipDuration（详细名字查文档，大差不差）属性设置为0，可以在某些环境解决抖动问题。