Common CSS Code invalidation issues

In front-end development often encounter some of the CSS code settings are invalid, below I summarize some of the situation I encountered.

1.height:100% invalid

The height of the percentage is set according to the height of the container of the parent element of this element. For example, if the height of a div is set to 40%, and the parent element height is 100px, then the height of the div should be 40px.

By default

2.z-index invalid

Z-index in use, there is a premise, only in position is relative,absolute,fixed effective. You should also pay attention to the Dome node relationship after satisfying this condition, and the Z-index value only determines the stacking order of sibling child elements in the same parent element. The stacking order is not the z-index of the child elements but the z-index of the parent element.

3.position:fixed invalid

Fixed positioning element, if the parent element has the transform attribute, then the fixed invalid, the reason is unclear. Set the fixed element to its parent element do not set the Transform property, remember this situation is OK.

Common CSS Code invalidation issues