किसी अन्य ज़ेड-इंडेक्स परत

Question

स्थिति में एक निश्चित अतिप्रवाह तत्व के चारों ओर पाठ ले जाएं स्थिति: मेरे पास मेरे टेम्पलेट में एक निश्चित छवि है जो सामग्री को बहती है। क्योंकि यह तय है, कभी-कभी छवि टेक्स्ट बहती है। क्या कोई ऐसी विधि है जो इसे हल करती है और पाठ को छवि के चारों ओर ले जाती है, जैसे कि यह सामग्री div के अंदर float है।

html-example देखें।

सीएसएस उत्तर को प्राथमिकता दी जाती है, जावास्क्रिप्ट/jQuery उत्तर स्वीकार्य हैं।

कुछ अतिरिक्त विवरण:

• सामग्री यादृच्छिक है। यह लंबा, छोटा, छवियां हो सकती है और HTML हो सकती है।
• #cloud किसी भी सामग्री के साथ एक ही स्थिति में रहना है। क्योंकि यह एक कम z- सूचकांक परत में #cloud डाल द्वारा हल है

मुद्दा नहीं लाइव वेबसाइट पर दिखाई दे अब, है।

Answer 1

आप क्या देख रहे हैं के लिए CSS Exclusions and Shapes कहा जाता है। यह अपेक्षाकृत नया है और ब्राउज़र द्वारा व्यापक रूप से समर्थित नहीं है। आपको इस महान article on CSS Exclusions में रुचि भी हो सकती है।

Answer 2

मुझे विश्वास है कि यह आपके लिए क्या देख रहे हैं: http://jsfiddle.net/pG3AG/

बादल div अपेक्षाकृत तैनात होना था, निरपेक्ष नहीं के बाद से पूर्ण स्थिति के बजाय व्यूपोर्ट के अनुसार के सापेक्ष स्थिति तत्व का कारण बनता है अन्य तत्व (इस मामले में सामग्री तत्व की तरह)। साथ ही, सही: बॉक्स की 20px स्थिति को कम या निकालने की आवश्यकता है ताकि लाइन में 'अधूरा' शब्दों के अंतिम अक्षर क्लाउड बॉक्स के पीछे समाप्त न हों।

आशा है कि यह आपके लिए काम करेगा!

Answer 3

कामयाब का प्रकार JQuery के साथ जे एस फिडल उदाहरण के लिए इसे हल करने (क्षमा करें, एक सीएसएस समाधान के साथ नहीं आ सकता है)

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); 

मूल रूप से, मैं एक छिपा div में जोड़ रहा करने के लिए जारी बादल की स्थिति इसलिए यह सामग्री में बैठती है, पाठ को चारों ओर घूमती है, जहां बादल अग्रभूमि में दिखाई देता है।

वेबसाइट से लिंक पर सामग्री को देखते हुए, आप आसपास के कंटेनर में div बदलाव और जो नंबर एक छोटे से साथ खेलने के लिए आवश्यकता हो सकती है, लेकिन यह कम या ज्यादा काम करता है यहाँ http://jsfiddle.net/cLnz6/58/

Answer 4

अगर मैं समझता हूँ

(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

व्यक्तिगत रूप से, मैं क्या होगा बादल सिकोड़ें एक छोटा सा है, कि बादल खूब काफी बड़ा है कि के साथ क्या करना है। तो मैं उन बादलों को एक पारदर्शी पृष्ठभूमि के साथ एक निश्चित div में डाल दूंगा ताकि वे स्क्रीन के साथ रह सकें, ऐसा लगता है कि वे तैर रहे हैं।

दूसरी बात। अगर पहला विकल्प नहीं है।मैं Z-index को बदलकर क्लाउड को मुख्य फ़ीड के पीछे रखूंगा, क्लाउड की उस छोटी सी नोक पर कुछ भी नहीं है और पृष्ठभूमि में अन्य बादल फ़ीड के पीछे भी हैं, इसलिए मैं कल्पना नहीं करता कि इससे कोई सवाल उठाएगा एक बादल की नोक फ़ीड के पीछे लटक रही है।