Front-end-learning-to-organize-notes icon indicating copy to clipboard operation
Front-end-learning-to-organize-notes copied to clipboard

Published 20 hours ago • verified publisher icon Chocolate1999

css设置元素隐藏，两种有什么区别？

Open Chocolate1999 opened this issue 4 years ago • 1 comments

Chocolate1999 avatar Jan 12 '21 07:01 Chocolate1999

visibility:hidden、display:none、z-index=-1、opacity：0

  • opacity：0,该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定了一些事件，如click事件也能触发
  • visibility:hidden,该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件
  • display:none, 把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删掉
  • z-index=-1置于其他元素下面

HearLing avatar Jan 29 '21 01:01 HearLing