css 占位置但不显示

在前端开发中，CSS 不仅控制了网页的样式，还发挥了占位的重要作用，但是也经常会出现一些占据了位置但是不显示的情况。

.box {
        width: 100px;
        height: 100px;
        background-color: red;
        display: none;
}

在上述代码中，我们设置了一个宽高都为 100px 的 div，背景色为红色，但是它的 display 属性却被设置为了 none，这就意味着这个元素不会显示，但是它还是占据了宽高。

同样，当我们使用 position:absolute 或者 position:fixed 这样的定位属性时，元素也会占据位置但是不显示。

.box {
        width: 100px;
        height: 100px;
        background-color: red;
        position: absolute;
        left: -9999px;
}

在上述代码中，我们将元素设置成了绝对定位，并用 left 属性将它定位到了距离视口最左侧的 -9999px 的位置，这样元素虽然不会显示，但是还是会占据这个位置。

如何解决这个问题呢？可以将元素设置为 visibility: hidden，这样元素虽然不显示，但是还是会占据位置，并且不会影响其他元素的布局。

.box {
        width: 100px;
        height: 100px;
        background-color: red;
        visibility: hidden;
}
    

总之，CSS 的占位作用可以方便地控制网页的布局，但也需要注意一些元素占据位置但不显示的问题，并采取相应的解决方法。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！