五种方式隐藏元素，其中display最为不同，display:none不再占据页面空间，position也同，毕竟移出了可视区域，不再影响页面布局
opacity

是否占据页面空间：是，虽然透明度为0依旧占据空间影响页面布局
是否影响用户交互：是，虽然透明了，但链接按钮依然反应
是否能被读屏软件读取：能
是否可以实现动画：可以使用transition: all .25s linear;实现动画
是否可以js操作DOM：可以

visibility

是否占据页面空间：是，用户看不见，但占据页面空间，影响页面布局
是否影响用户交互：不，不可见也不能被点击
是否能被读屏软件读取：不能，被隐藏
是否可以实现动画：可以，只要初始状态和终止状态不同就可以
是否可以js操作DOM：可以

display

特点~是否占据页面空间：否，不影响页面布局
是否影响用户交互：否
是否能被读屏软件读取：否
是否可以实现动画：否，不同状态值立即生效
是否可以js操作DOM：可以

position

是否占据页面空间：移出可是窗口，不影响页面布局
是否影响用户交互：否
特点~

假设有一个元素你想要与它交互，但是你又不想让它影响你的网页布局，没有合适的属性可以处理这种情况（opacity 和 visibility 影响布局， display 不影响布局但又无法直接交互——译者注

是否能被读屏软件读取：可以
是否可以实现动画：可以
是否可以js操作DOM：可以

clip-path
clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);裁剪出去

clip-path 属性还没有在 IE 或者 Edge 下被完全支持。如果要在你的 clip-path 中使用外部的 SVG 文件，浏览器支持度还要更低。

是否占据页面空间：是
是否影响用户交互：只要裁剪区不为0，就可以
是否能被读屏软件读取：能
是否可以实现动画：可以实现动画
是否可以js操作DOM：可以

最后看一下代码

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .posit{
            position: absolute;
            left: -10000px;
            top: -100000px;
        }
        .clip{
            clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);
        }
    </style>
</head>
<body>
    <div class="opac" id="opac" style="opacity:0"><a href="#">1111</a></div>
    <div style="display:block">display one</div>
    <div class="displ" id="displ" style="display:none">
        display two:
        <div class="dischild" style="display:block">child display two</div>
    </div>
    <div class="visib" id="visib" style="visibility:hidden">
        visibility:
        <div class="visichild" style="visibility:visible">child visible</div>
    </div>
    <div class="posit" id="posit">position</div>
    <div class="clip" id="clip">clip-path</div>
    <div>clip-path two</div>
    <script type="text/javascript">
        document.getElementById('visib').style.visibility='visible';
    </script>
</body>