修复了div在顶部显示层问题

Question

我正在尝试将div固定在顶部，但看起来该图层重叠了。

CSS：

    #fsancy {
        background-color:#ddd;
        position: fixed;
        display: block;
        width: 200px;
        height: 100px;
        left: 50%;
        top: 0%;
        margin-left: -100px; /*half the width*/
    }

HTML：

<div class="container" id="fsancy">
<div class="row">
    <div class="col-lg-12 text-center fluid fixme" id=""
         style="background-color: #ff0033; max-width: 100%; color: #ffffff; font-size: xx-large">Share £200 With A
        Friend
    </div>
</div>

图片示例

Answer 1

固定的位置元素不是常规文档流的一部分，因此在您的特殊情况下，您必须向第一个常规元素中添加一些margin-top，其高度应足以避免固定标头下的重叠/匹配。

Answer 2

@Michelbach Alin，使用位置绝对值和z-index属性将其固定为图层。

    int radius=0;     //radius=0
    String driverId;  //driverId=null
    boolean driverFound=false;

//This Method Find Near Dear
void FindDriver(final LatLng theLocation){
    DatabaseReference mRef= FirebaseDatabase.getInstance().getReference(DriverType);
    GeoFire geoFire=new GeoFire(mRef);
        GeoQuery query=geoFire.queryAtLocation(new GeoLocation(theLocation.latitude,theLocation.latitude),radius);
        query.removeAllListeners();
        query.addGeoQueryEventListener(new GeoQueryEventListener() {

            //When this method find driver call antoher method and finish this activity   
            @Override             
            public void onKeyEntered(String key, GeoLocation location){
                if(!driverFound){
                    driverFound=true;
                    driverId=key;
                    SetDriver(driverId)}

            @Override
            public void onKeyExited(String key) {}
            @Override
            public void onKeyMoved(String key, GeoLocation location) {}
            @Override
            public void onGeoQueryReady() {
                if(!driverFound){
                    if(radius<5){
                       radius++;
                       FindDriver(theLocation);    //Method Call it self and increase the radius if driver still not found
                     }else{
                       Dismiss();
                       Toast.makeText(getActivity(),"No Near Driver",Toast.LENGTH_SHORT).show();
                     }

                }
            }
            @Override
            public void onGeoQueryError(DatabaseError error) {

            }
        });
    }
   }

参考。 https://www.w3schools.com/cssref/pr_pos_z-index.asp