CSS 相对/绝对(relative/absolute)定位与jQuery的控制显示隐藏

以前写显示隐藏老是用jq方法控制：

dom.show();
dom.hide();

其实这样还是有很多缺陷的。
这是html结构：

    <div class="holi">
        here are some test words
    </div>
    <div id="button">点击显示</div>

如果使用position:absolute和top－9999px控制点隐藏

        .holi{
            width: 200px;
            height: 200px;
            border: 1px solid red;
            position: absolute;
            visibility: hidden;
        }

这时候应该这样用jq让他显示比较好

        $(function(){
            $('#button').click(function(){
                $('.holi').css({
                    'position':'static',
                })
            })
        })

如果是position: absolute＋visibility: hidden;控制的 隐藏的话：

即

        .holi{
            width: 200px;
            height: 200px;
            border: 1px solid red;
            position: absolute;
            visibility: hidden;
        }

此时应该这样用jq控制显示：

        $(function(){
            $('#button').click(function(){
                $('.holi').css({
                    'position':'static',
                    'visibility':'visible'
                })
            })
        })

当然还有show hide直接调用这种方法完全隐藏。

元素隐藏与显示是我们在页面制作与交互效果实现中非常常见的，如果您只是使用display:none与display:block/inline来实现DOM元素的显隐控制，那你就out了。

如果希望隐藏内容能够被辅助阅读设备识别，就不能使用display:none以及visibility:hidden隐藏元素。可以使用模拟隐藏的隐藏方法，又称可用性隐藏。absolute＋top：－9999px； 如果你是希望完全隐藏的，那就可以使用display:none或visibility:hidden。