Di chuyển văn bản xung quanh phần tử tràn cố định trong một lớp z-index khác

Question

Tình huống: Tôi có hình ảnh cố định trong mẫu của tôi làm tràn nội dung. Bởi vì nó cố định, đôi khi hình ảnh tràn văn bản. Có phương pháp sửa lỗi này và làm cho văn bản đi xung quanh hình ảnh, như thể đó là float -ing bên trong div nội dung.

Xem html-example.

Câu trả lời CSS được ưu tiên, câu trả lời Javscript/jQuery được chấp nhận.

Một số chi tiết thêm:

• Nội dung là ngẫu nhiên. Nó có thể dài, ngắn, chứa hình ảnh và có html.
• #cloud phải ở trên cùng một vị trí với bất kỳ nội dung nào.

Sự cố không hiển thị trên trang web trực tiếp nữa, vì nó được giải quyết bằng cách đặt #cloud trong lớp chỉ mục z thấp hơn.

Answer 1

gì bạn đang tìm kiếm cho được gọi là CSS Exclusions and Shapes. Điều này tương đối mới và không được hỗ trợ rộng rãi bởi các trình duyệt. Bạn cũng có thể quan tâm đến điều này tuyệt vời article on CSS Exclusions.

Answer 2

Tôi tin rằng đây là những gì bạn đang tìm kiếm: http://jsfiddle.net/pG3AG/

Các div đám mây đã được tương đối vị trí, không phải tuyệt đối kể từ khi định vị tuyệt đối làm cho yếu tố để xác định vị trí theo khung nhìn thay vì liên quan đến các yếu tố khác (như phần tử nội dung trong trường hợp này). Ngoài ra, quyền: 20px định vị của hộp cần thiết để được giảm hoặc loại bỏ để các chữ cái cuối cùng từ 'chưa hoàn thành' từ trong dòng không kết thúc đằng sau hộp đám mây.

Hy vọng tính năng này phù hợp với bạn!

Answer 3

Kind của quản lý để giải quyết nó cho ví dụ với JQuery JS Fiddle (xin lỗi, không thể tìm ra một giải pháp CSS)

var _top = $('#cloud').offset().top; 
var _left = $('#cloud').offset().left; 
var _height = $('#cloud').height(); 

var _contentTop = $('#content').offset().top; 
var _contentLeft = $('#content').offset().left; 
var _contentWidth = $('#content').width(); 

var _floatWidth = (_contentLeft+_contentWidth)-_left 
    var _floatTop = _top-_contentTop; 

$('#content').prepend('<div id="virtual" style="float:right">&nbsp;</div>'); 
$('#virtual').css('margin-top',_floatTop).css('width',_floatWidth).css('height',_height); 

Về cơ bản, tôi thêm vào một div ẩn nổi đến vị trí của đám mây để nó nằm trong nội dung, đẩy văn bản xung quanh, nơi đám mây xuất hiện ở nền trước.

Nhìn vào nội dung trên trang web bạn liên kết đến, bạn có thể cần phải thay đổi div vào container xung quanh và chơi với những con số một chút, nhưng nó nhiều hơn hoặc công trình ít đây http://jsfiddle.net/cLnz6/58/

Answer 4

nếu tôi hiểu

(http://jsfiddle.net/VG4Ef/1/)

body{ 
    background-color: #8888FF; 
} 

#container{ 
    float:left; 
    width: 400px; 
    background-color:#CFCFFF; 
    height: auto; 
    margin: 10px auto; 
    padding: 10px; 
    margin-right:10px; 
} 

#content{ 
    background-color: #FFDFDF; 
    width: 340px; 
    padding: 5px; 
    position:relative; 
    float:left: 
} 

#cloud{ 
    width: 130px; 
    height: 100px; 
    background-color:#FFF; 
    float:right; 
    top: 120px; 
    text-align: center; 
    line-height: 100px; 
    color: #999; 
    font-size: 12px; 
    float:right; 
    display:inline-block; 
    margin-top:-100px; 
    margin-right: -100px; 
    background: yellow; 
} 
​ 

Answer 5

cá nhân, những gì tôi sẽ làm là Shrink đám mây một chút, đám mây đó là rất nhiều đủ lớn để làm điều đó với. sau đó tôi sẽ đặt những đám mây đó trong một Div cố định với một nền trong suốt để chúng ở lại với màn hình, làm cho nó trông giống như chúng đang trôi nổi.

Điều thứ hai. nếu đầu tiên không phải là một lựa chọn.Tôi sẽ đặt đám mây đằng sau nguồn cấp dữ liệu chính bằng cách thay đổi Z-index không có gì trên đầu nhỏ của đám mây và các đám mây khác trong nền phía sau nguồn cấp dữ liệu, vì vậy tôi sẽ không tưởng tượng rằng nó sẽ nêu ra bất kỳ câu hỏi nào nếu đầu của một đám mây được treo phía sau nguồn cấp dữ liệu.