背景图片和定位的图片
第一种情况,图片超出了盒子的范围,背景图片没法做,只能用定位。
第二种情况,既可以使用定位,也可以使用背景图片。
其次,背景图片往往被"压住",而定位的图片往往"压住"别人。
visibility和display
设置了visibility: hidden
的元素本质上还是占有文档流的位置,仍然具有宽高。
而设置了display: none
的元素本质上不占有文档流的位置,不具有宽高。
实例
下拉菜单往往脱离标准流,在鼠标经过的时候展示全貌。展示全貌的时候可能会 遮住 底下标准流中的元素内容。但是我们希望只有在鼠标经过时,才遮住底下内容,在鼠标不经过时不遮住底下的内容。
因此常常使用display: none
来控制下拉菜单隐藏时的样式,此时下拉菜单 不占有位置 ,内容填充为空白,即使下拉菜单下面有内容,也不会被遮住。
但是如果使用visibility: hidden
,说明下拉菜单 一直占有位置,势必会遮住下拉菜单底下的内容。