Thuộc tính z-index không sử dụng được cho float banner

Vừa rồi e có chèn 2 float banner quảng cáo cho site của em.
Em không bật chế độ skin mobile. Chỉ để skin mặc định
Nhưng không biết sao hông sử dụng được thuộc tính z-index cho 2 banner này.
Nếu để z-index:-1 thì 2 banner biến đâu mất tiêu. Mà không thêm thuộc tính z-index thì lên mobile nó cứ nằm chồng lên giao diện nhìn rất xấu.

Code 2 banner quảng cáo của em đặt dưới footer như sau:

HTML:

<a style="display:scroll;position:fixed;top:246px;left:0px;" title="Chợ người Việt" href="http://chongap.vn" target="_blank"><img src="qc/left.png" title="Chợ người Việt" alt="Chợ người Việt"/></a>
<a style="display:scroll;position:fixed;top:246px;right:0px;" title="Chợ người Việt" target="_blank" href="http://chongap.vn"><img src="qc/right.png" title="Chợ người Việt" alt="Chợ người Việt"/></a>

Giao diện khi lên mobile mà chưa set thuộc tính z-index:


Thêm thuộc tính z-index thì 2 banner mất hút...
Giao diện mặc định của web em:


Không biết có anh chị nào đã từng gặp vấn đề này chưa ạ? Xin hướng dẫn giúp em. Em xin cám ơn ạ.

 

Dạ demo của em: chonguoiviet.net
Em không biết thêm z-index như thế nào cho đúng!
Mong anh giúp e ạ.

 

Anh cho em hỏi.
Như em nói trên, e không bật chế độ Responsive, thì đoạn code trên của anh có tác dụng ko ạ?
Em đã chèn thử rồi mà cũng không được.
Em có thử lại bằng đoạn code sau...mà cũng không được..

Mã:

@media all and (max-width:1000px) {
    .banner {
        display:none;
    }
}

Nó chỉ hữu hiệu với trình duyệt thôi, còn với smartphone thì không thấy thay đổi gì.

 

Dạ, em làm được rồi anh, em thiếu một chỗ.. mới chỉ thêm cho máy tính, còn thiếu max width cho device...
Đáng ra phải là:

Mã:

@media all and (max-width:1000px) and(max-device-width:1000px){
.banner {
display:none;
}
}

Vậy là lên điện thoại, banner đã biến mất...mừng quá mừng
Em cám ơn anh thanhthanh nha!