Div với cuộn và nội dung có vị trí tuyệt đối

Question

Tôi có "div" với kiểu: overflow-y: scroll; overflow-x: auto; Tôi cố gắng thêm động vào hình ảnh "div" này với vị trí tuyệt đối hoặc tương đối. Mọi thứ có vẻ ok cho đến khi người dùng cố gắng cuộn nội dung "div": hình ảnh vẫn ở vị trí cố định so với cửa sổ trình duyệt. Vấn đề này dường như chỉ trong IE (7), trong tất cả mọi thứ firefox là tốt. Có giải pháp nào cho việc này không?

EDIT (để trả lời các câu hỏi được nêu bên dưới): Tôi định vị phần tử vì tôi cần nó hiển thị ở phía trước phần tử khác.

Answer 1

Có lý do cụ thể nào bạn cần đặt vị trí cho hình ảnh không? Nó hoạt động tốt trong IE7 mà không cần thiết lập một vị trí.

<div style="overflow-x:auto; overflow-y:scroll; width:200px; height:200px;"><img src=xxx.gif" width="200" height="250" /></div> 

Answer 2

Tôi không biết đó là lỗi hay "tính năng" trong IE, nhưng tôi đã chạy vào cùng một điều trước đây. May mắn có một sửa chữa dễ dàng. Chỉ cần thêm "position:relative" vào <div> có nội dung có thể cuộn.

Answer 3

Tuyên bố position: absolute; có nghĩa là phần tử sẽ được hiển thị tương ứng với góc trên bên trái của khung nhìn. Thay vào đó, hãy sử dụng relative có nghĩa là các giá trị bạn sử dụng cho left và top sẽ được thêm vào bất kỳ nơi nào img sẽ bình thường.

Answer 4

Bạn cần sử dụng vị trí tương đối nếu bạn muốn nó có thể cuộn. Bí quyết là sử dụng vị trí phủ định trên phần tử thứ hai.

Hãy nói rằng bạn có hai yếu tố A và B, và bạn muốn vị trí B trước A. Nó sẽ giống như thế này:

<div id="A" style="position:relative; width:300px; height=240px;">Element A</div> 

<div id="B" style="position:relative; width:300px; height=240px; top:-240px;">Element B</div> 

Tùy thuộc vào nội dung, bạn có thể phải bổ sung thêm các kiểu như "display: block;" vv Một nguồn lực tốt cho các là w3schools.com

Để xem hướng dẫn tốt về vị DIV với CSS đi:

http://www.barelyfitz.com/screencast/html-training/css/positioning/

Cheers

Answer 5

Bạn biết những gì, nó chỉ có thể được dễ dàng hơn để bọc các yếu tố vị trí tuyệt đối trong một phần tử chứa vị trí tương đối, tôi nghĩ rằng sẽ có thể cuộn ...

Answer 6

Quấn tất cả mọi thứ vào một div chứa vị trí tương đối trên trang:

<div style="display:block; position:relative; width:200px; height:200px; margin:0; padding:0;"> 
    <br /> 
    <img src="_foo_.gif" style="position:absolute; top:0; left:0; z-index:100;" /> 
    <br /> 
    <div style="overflow-x:auto; overflow-y:scroll; width:200px; height:200px; z-index:10; display:block; position:relative;"> 
     <br />[scrolling content]<br /> 
    </div> 
    <br /> 
</div> 

Answer 7

Những điều tôi đã học một cách khó khăn: Đối với IE6/IE7, nó có thể cần phải có ảnh làm phần tử DOM cuối cùng trong DIV chứa để nó xuất hiện trên DIV cuộn.

Answer 8

Hãy thử float:left hoặc float:right với margin

Tôi có cùng một vấn đề trong chrome với position:absolute trong một overflow-y: auto;. Các div đã được cố định trong đó vị trí- trong khi di chuyển.

Và một giải pháp đơn giản là sử dụng phao.

mã cũ của tôi was-

position:absolute; right:10px; 

và tôi thay thế bằng sau đây và nó worked-

float:right; margin-right:10px;