Làm thế nào để chọn các tùy chọn chồng chéo một DIV vị trí tuyệt đối?

Tôi có div vị trí tuyệt đối hoạt động như một chú giải công cụ. Trên chuột qua một phần tử nó hiển thị và sau đó ẩn ở chuột ra ngoài. Tôi có ít thành phần <select> trong trang được đặt phía trên phần tử tooltip. Trong trường hợp bình thường, chú giải công cụ sẽ xuất hiện trên thẻ chọn. Nhưng khi người dùng nhấp vào thẻ đã chọn và các tùy chọn được hiển thị, nó sẽ chồng chéo chú giải công cụ. Việc cung cấp chỉ mục z cao hơn cho thẻ chọn hoặc tùy chọn không hoạt động.Làm thế nào để chọn các tùy chọn chồng chéo một DIV vị trí tuyệt đối?

enter image description here

Đây là mã mẫu để minh họa sự cố.

<body> 
<h1>Select Options Overlapping Absolute Positioned DIV</h1> 

<select name="some-name"> 
    <option>United States</option> 
    <option>Canada</option> 
    <option>Mexico</option> 
    <option>Japan</option> 
</select> 

<div id="top-layer"> 
    <h2>Overlapping Div</h2> 
</div> 
</body>

CSS

select, options{ z-index:10;} 

#top-layer { 
    background:#ccc; 
    color:#000; 
    border:solid 1px #666; 
    position:absolute; 
    top:45px; 
    left:70px; 
    z-index:100; 
}

Nguồn

2011-11-18 Sandeep Paul

Điều này trong tất cả các trình duyệt? hoặc chỉ là Explorer? Phiên bản nào? Trong các phiên bản đầu tiên của trình thám hiểm ( steveax

lý do không đặt chú giải công cụ của bạn ở bên cạnh lựa chọn. theo cách đó, điều đó sẽ không xảy ra. – Joseph

Đây không phải là vấn đề của các thẻ được chọn chồng chéo trong IE6. Chỉ các tùy chọn bên trong thẻ được chọn mới xuất hiện phía trên div. Nó không hoạt động trong Firefox, IE8, IE9 và Chrome. chưa thử nghiệm trong bất kỳ trình duyệt nào khác. @fskreuz Chú giải công cụ được thêm động, vì vậy nó có thể xuất hiện ở bất kỳ đâu trong trang. –

Không phần tử sẽ áp dụng giá trị z-index mà không có cũng có một thuộc tính position (tuyệt đối, tương đối, cố định, vv).

Hãy thử thêm position:relative vào số select của bạn để nó được kế thừa giá trị z-index.

See this screencast for a more in depth explanation.

Nguồn

2011-11-18 20:36:10 motoxer4533

Ngay cả sau khi đặt 'vị trí: tương đối' thành' select' và 'options', nó không hoạt động. –

Bạn có thay đổi chỉ mục z của lựa chọn cao hơn cửa sổ bật lên không? – motoxer4533

Tôi đặt chỉ mục z của chú giải công cụ cao hơn chọn. –

Hãy thử:

form, select, options{ z-index:10;}

Có lẽ thẻ hình thức là cho nó trở thành lớp phủ. Nó sẽ làm việc như bạn có nó, như IE không đưa vào tài khoản z-index.

Kính trọng, -D

Nguồn

2011-11-18 20:37:42 Downpour046

Nó không hoạt động ngay cả khi chỉ định 'z-index' cho thẻ' form'. –

Theo thông số kỹ thuật (http://docs.webplatform.org/wiki/html/elements/option)

Trừ background-color và màu sắc, thiết lập phong cách áp dụng thông qua các đối tượng phong cách cho các phần tử lựa chọn được bỏ qua.

Và do đó thuộc tính z-index bị bỏ qua và hành vi mặc định là hiển thị trình đơn thả xuống phía trên tất cả các phần tử trên tài liệu.

Nguồn

2012-12-31 10:39:55

làm việc này (sử dụng jquery - nên được gọi là trên các sự kiện mouseover):

var $select = $("select").blur(); 
if ($.browser.webkit) { 
    $select.hide(); 
    setTimeout(function() { 
    $select.show() 
    }, 5); 
}

mờ dường như đủ trong IE7-9 và FF. Webkit không tôn trọng điều này (các lỗi được đệ trình chống lại điều này), do đó, giải pháp có vẻ là để ẩn và hiển thị hộp chọn một cách nhanh chóng.

Nguồn

2013-01-03 19:25:53 ScottE

-1

Ẩn Chọn qua tập lệnh là tùy chọn hiện tại có sẵn

Nguồn

2015-07-27 09:04:58 Sopo

Làm thế nào để chọn các tùy chọn chồng chéo một DIV vị trí tuyệt đối?

Trả lời

Các vấn đề liên quan