原来写法
文章来源:https://www.toymoban.com/news/detail-838158.html
<view class="map_bg" id="weixinMap" bindtap="event" style="display: none;">
<map subkey="{{subKey}}" style="width:100%;height:100%;z-index: -10;" latitude="23.099994" longitude="113.324520" scale="18" enable-zoom="{{false}}" enable-scroll="{{false}}">
</map>
<view class="map_company flex_start">
<image class="map_site" src="../../public/images/companyshow/tc_icon.png"></image>
<view class="company">
<view class="companyname omit">{{base_info.companyname}}</view>
<view class="district omit">{{base_info.district_text}}</view>
</view>
<view class="arrow_right"></view>
</view>
</view>
<view class="address address_distance">
<image class="map_site" src="../../public/images/jobshow/address.png"></image>
{{distance||'计算中'}}
</view>
.company_item .map_company{
padding: 10rpx;
width: 550rpx;
height: 80rpx;
border-radius: 8rpx;
background: #fff;
position:absolute;
top:-50%;
left:-50%;
transform:translate(-50%,-50%);
color: #000;
}
解决:在map外面包一层以及整体在外面包一层+定位修改为static+z-index
文章来源地址https://www.toymoban.com/news/detail-838158.html
<view>
<view class="map_bg" id="weixinMap" bindtap="event">
<map subkey="{{subKey}}" style="width:100%;height:100%;z-index: -10;" latitude="23.099994" longitude="113.324520" scale="18" enable-zoom="{{false}}" enable-scroll="{{false}}">
</map>
</view>
<view class="map_company flex_start">
<image class="map_site" src="../../public/images/companyshow/tc_icon.png"></image>
<view class="company">
<view class="companyname omit">{{base_info.companyname}}</view>
<view class="district omit">{{base_info.district_text}}</view>
</view>
<view class="arrow_right"></view>
</view>
</view>
<view class="address address_distance">
<image class="map_site" src="../../public/images/jobshow/address.png"></image>
{{distance||'计算中'}}
</view>
.company_item .map_company {
padding: 10rpx;
width: 550rpx;
height: 80rpx;
border-radius: 8rpx;
background: #fff;
position:static;
margin: -23% auto 0;
z-index: 1000;
color: #000;
}
到了这里,关于【原生小程序小程序开发中,块内容使用position绝对定位之后 不显示】的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!