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。