半个圆圈在地图上，半个圆圈在地图外的小程序效果怎么写

Question

http://7xk6sp.com1.z0.glb.clo...
这个效果在小程序中该怎么实现啊，我试了一下margin-top: 负一半实现不了，又试了下绝对定位也不行啊~~~

Answer 1

绝对定位是可以的，应该是你写法的问题，不知道你是怎么写的

<view class="box">
    <view class="box1">
        你的圆
    </view>
</view>

/* pages/ceshi/ceshi.wxss */
.box1 {
    position: absolute;
    top: -40px;
    left: 50%;
    margin-left: -40px;
    width: 80px;
    height: 80px;
    z-index: 100;
    border-radius: 50%;
    background: lemonchiffon;
}

.box {
    position: relative;
    height: 200px;
    border: 1px solid #ddd;
    margin: 50px 30px 0;
}

Answer 2

随手写了下 试试？

    <div style="position:relative">
        <div style="position:absolute;top:0;left:50% transform: translateX(-50%);height:200px;z-index:100">
        你的圆
        </div>
        <div style="position:relative;margin-top:100px;z-index:50">
        下部面板
        </div>
    </div>