position定位属性、元素叠加顺序及css实现鼠标移动显示元素

版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/qq_27984879/article/details/86636901

position定位属性

• static 默认值，没有定位(元素出现在普通流中)
• absolute 绝对定位，相对于static以外的第一个父元素进行定位
• fixed 绝对定位，相对于浏览器窗口进行定位
• relative 相对定位，相对于元素的正常位置进行定位
• inherit 继承父元素的值

absolute、fixed、relative都可以用left、right、top、bottom属性进行规定

css来实现鼠标移动到元素上显示某个元素

首先先做好所有的样式，利用display属性先隐藏

display:none;
隐藏一个元素

.鼠标指向的元素:hover .要显示的元素{
	display:none;
}

元素的叠加顺序

• z-index可以设置元素的叠加顺序，但依赖定位属性
• z-index大的元素会覆盖z-index小的元素
• z-index为auto的元素不参与层级比较
• z-index为负值，元素被普通流中的元素覆盖
• z-index如果有则默认为0，如果没有默认为auto