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。