CSS combat notes (eight) element hiding

In CSS, a hidden element there are many ways, let's introduce one by one

1, set the opacity

opacity: 0;

The opacity of the element is set to 0, but this element will still occupy their original positions, but it is not visible in the visual

It does not change the layout of the page, you can also respond to user actions

2, set the visibility

visibility: hidden;

The visibility of the element is set to hide, so that this element is not visible, but it still occupies its original position

It does not change the layout of the page, but can not respond to user actions

In addition, the descendants of this element will be set to hide, but you can give descendant elements explicitly set the visibility to visible unhide

3, a display mode

display: none;

This is a hidden element in the true sense, it does not occupy the original space, as if this element should not exist as

This means that it has changed the layout of the page, naturally it can not respond to user actions

In addition, the descendants of this element will be set to hide

4, a positioning mode

position: absolute;
top: -999px;
left: -999px;

Set elements of targeting methods to absolute positioning, so you can make an element from the document flow

Then set the left and top of a large negative number, the element out of the visible region, hiding implementation elements

---

Finally add a property, overflow, when the content exceeds the predetermined for the element block how to process optional values ​​as follows:

• visible: Beyond the content will be displayed outside the box elements
• hidden: Beyond the content will be trimmed
• scroll: Always show the scroll bar, you can pull the contents of the scroll bar to see beyond
• auto: When the content does not exceed the elements box, do not display scroll bars when the content exceeds the element's box, to display scroll bars

[Read More CSS series, see the CSS study notes ]