鍍金池/ 問(wèn)答/HTML/ 半個(gè)圓圈在地圖上，半個(gè)圓圈在地圖外的小程序效果怎么寫

半個(gè)圓圈在地圖上，半個(gè)圓圈在地圖外的小程序效果怎么寫

http://7xk6sp.com1.z0.glb.clo...
這個(gè)效果在小程序中該怎么實(shí)現(xiàn)啊，我試了一下margin-top: 負(fù)一半實(shí)現(xiàn)不了，又試了下絕對(duì)定位也不行啊~~~

回答
編輯回答
櫻花霓

絕對(duì)定位是可以的，應(yīng)該是你寫法的問(wèn)題，不知道你是怎么寫的

<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;
}

圖片描述

2018年3月18日 10:15
編輯回答
拽很帥

隨手寫了下 試試？

    <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>
2017年1月2日 04:16