CSS Relative/Absolute (Relative/absolute) positioning with jquery control display hidden

Once write show hide always use JQ method control:

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

There are, in fact, very many flaws.

This is the HTML structure:

    <divclass="holi">        somewords    </div>    <divid="button">点击显示</div>

Assume that you use Position:absolute and top-9999px control points to hide

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

This should be the way to use JQ to show him better.

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

The hypothesis is position:absolute+visibility:hidden; the hidden words of control:

That

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

This should be done with the JQ control display:

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

And, of course, show hide directly calls this method completely hidden.

Element hiding and display are common in the implementation of page authoring and interactive effects, assuming you are only using Display:none and Display:block/inline to implement the explicit control of DOM elements. Then you're out.

Suppose you want the hidden content to be recognized by a secondary reading device. You cannot use Display:none and Visibility:hidden to hide elements.

The ability to use hidden methods of simulation hiding, also known as usability concealment. Absolute+top:-9999px. If you want to be completely hidden, then you can use Display:none or Visibility:hidden.

CSS Relative/Absolute (Relative/absolute) positioning with jquery control display hidden