根据某个元素做相对定位

html

<div id="scrollLabOrderDetail" class="drug-content" hr-self-height="getLabProjectHeight()" on="clinicInfo.clinicCate">
    <div class="lab-items">
        <ul class="li-striped">
            <li class="li-lab-items" ng-repeat="labItems in labItemsCheck">
                <label class="checkbox " >
                    <input type="checkbox" ng-model="labItems.checked" ng-disabled="doctorstationParaValue.labMultitpleSelect==1?labItems.disabled:false"
                           ng-change="changeChecked(labItems)"/>
                        <span class='sheet-title overflow-ellipsis'>
                            {{labItems.data.itemName}}
                        </span>
                </label>
                <span class="lab-item-more margin-left10" id="labChargeDetail{{$index}}" ng-click="getLabChargeDetail(labItems, $index)">
                    <a class="a-icon a-fs"><span class="more-icon">￥</span></a>
                </span>
                <span class="fg-color-blue specimen-name overflow-ellipsis" ng-if="labItems.checked">{{labItems.data.specimenName}}</span>
                <span class="lab-item-more" ng-if="labItems.data.type === 1" id="labSheetDetail{{$index}}"
                      ng-click="openLabItemDetail(labItems, $index)">
                    <a>详细<span class="more-icon">?</span></a>
                </span>
            </li>
        </ul>
    </div>
</div>
<div ng-show="labChargeDetailShow" click-outside="closeLabChargeDetail()"
     class="labChargeDetailMark popover fade bottom in  popover-charge">
    <div class="arrow"></div>
    <!--<h3 class="popover-title">{{labSheetTitle}}</h3>-->
    <!--<button type="button" class="close" ng-click="openMrDescPop(0)">&times</button>-->
    <div class="popover-content">
        <ul class="li-striped border-line" ng-show="labChargeDetailList.length > 0">
            <li>收费项目名称</li>
            <li>单价</li>
            <li>单位</li>
            <li>数量</li>
            <li>金额</li>
        </ul>
        <ul class="li-striped border-line-bottom-left-right" ng-repeat="labChargeDetail in labChargeDetailList">
            <li title="{{labChargeDetail.itemName}}">{{labChargeDetail.itemName}}</li>
            <li title="{{labChargeDetail.price}}">{{labChargeDetail.price}}</li>
            <li title="{{labChargeDetail.units}}">{{labChargeDetail.units}}</li>
            <li title="{{labChargeDetail.amount}}">{{labChargeDetail.amount}}</li>
            <li title="{{labChargeDetail.totalPrice}}">{{labChargeDetail.totalPrice}}</li>
        </ul>
    </div>
</div>

Js

if ($scope.labChargeDetailList.length > 0) {
    var mark = $("#labChargeDetail" + index);
    var offset = $(mark).offset();
    var mrDesc = $(".labChargeDetailMark.popover");
    /* if (mrDesc.css("display") === "none") {
     mrDesc.css({top: (offset.top - 67) + "px", left: (offset.left - 116) + "px", display: "block"});
     } else {
     $(".labSheetDetailMark.popover").css({display: "none"});
     }*/
    var numTop =65; //上边距减去的数值
    var numLeft = 300;//左边距减去的数值
    if($(window).width()<1100){
        // 在1024*768下
        numLeft = 212;
    }
    if (!$scope.labChargeDetailShow) {
        if ($scope.clinicInfo.groupOrder === groupOrderEnum.GROUP) {
            mrDesc.css({
                top: (offset.top - numTop) + "px",
                left: (offset.left - numLeft) + "px",
                display: "block"
            });

        } else {
            mrDesc.css({
                top: (offset.top - numTop) + "px",
                left: (offset.left - numLeft) + "px",
                display: "block"
            });

        }
        $scope.labChargeDetailShow = true;
    } else {
        $scope.labChargeDetailShow = false;
    }
}