css父级占位置但隐藏，子级可显示

在css中，可以使用visibility属性来设置占位隐藏，语法 visibility:hidden;；该属性规定元素是否可见，当值为“hidden”时，表示元素是不可见的，但也会占据页面上的空间，并对网页的布局起作用。需要子级可显示时，语法visibility: visible

以uniapp中的movable-area、movable-view为例

<movable-area class="movabelArea">
    <movable-view class="max" direction="all" inertia="true" @click="backHome">
        <image class="homeImg" src="/static/images/home.png"></image>
    </movable-view>
</movable-area>

 .movabelArea{
        width: 100vw;
        height: 100vh;
        position: fixed;
        z-index: 100;
        visibility: hidden;
    }
    .max{
        background-color: #1890ff;
        width: 108upx;
        height: 108upx;
        border-radius: 50%;
        text-align: center;
        box-shadow: 4upx 4upx 16upx #999;
        position: absolute;
        bottom: 96upx;
        right: 88upx;
        top: auto;
        left: auto;
        z-index: 45;
        visibility: visible;
    }
    .homeImg{
        width: 48upx;
        height: 48upx;
        display: inline-block;
        margin-top: 28upx;
    }

效果如图：

可随意移动首页按钮.png