Home > Article > Web Front-end > How to hide elements but retain position in css
How to hide elements but retain position in css
- 青灯夜游Original
- 2021-05-13 14:38:405657browse
In CSS, you can use the visibility attribute to hide elements but retain the element position. You only need to set the "visibility: hidden;" style to the element; in this way, the element will be hidden, but will not disappear and still occupy the Space, the original HTML style will not be changed after hiding.
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
css hides elements but retains position
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>元素隐藏--visibility: hidden</title>
<style>
.visibility{
visibility: hidden;
}
</style>
</head>
<body>
<div>正常显示元素</div>
<div class="visibility">隐藏元素</div>
<div>正常显示元素</div>
</body>
</html>Rendering:
The visibility attribute specifies whether the element is visible.
This attribute specifies whether to display the element box generated by an element. This means that the element still occupies its original space, but can be completely invisible.
Use visibility: hidden, the element will be hidden, but it will not disappear, it will still occupy space, and the original style of html will not be changed after hiding; it will be inherited by descendants, and descendants can also pass The displayed setting visibility: visible; is used to anti-hide; the event bound to the element will not be triggered. Dynamically modifying this property will cause redrawing.
(Learning video sharing: css video tutorial)
The above is the detailed content of How to hide elements but retain position in css. For more information, please follow other related articles on the PHP Chinese website!