关于定位——遮罩层效果使用心得

  今天写代码时遇到个问题。原效果要求当鼠标聚焦在其他位置时显示正常内容，鼠标悬停时显示隐藏内容。我自己的思路是将隐藏部分设置位所需大小，透明度为零隐藏。定位在需要位置，鼠标悬停触发效果。用css实现。

定位时发现不能定位到所需位置。所以就重新学了定位，并归纳如下：

1position值：static  relative  absolute  fixed inhert

static：元素框正常生成，可以看作是默认值。

relative：相对于原来位置定位，原来位置任然保留。

absolute：元素完全脱离文档流，并相对于包含块定位。定位后生成块级框，不论原来属于何种类型的框。

包含块：对于浮动元素来说，包含块就是最近的块级祖先元素。而对于定位则不一样。

根元素包含块一般是指html或body

对于一个非根元素，定位值为relative或static，包含块为最近的块元素

对于定位值为absolute的非根元素，包含块是最近的定位值不是static的祖先元素。

综上所述，要是定位实现达到所需效果，为遮盖层父元素添加position：relative即可将父元素变为包含块，遮盖层宽高设为100%；

position：absolute；left：0；right：0；即可定位到所需位置。