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

2023-07-04  本文已影响0人  柯柯的呵呵哒

在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
上一篇 下一篇

猜你喜欢

热点阅读