2010-11-30 15 views
11

क्या सीएसएस का उपयोग कर किसी छवि पर ऑब्जेक्ट को फ़्लोट करना संभव है? मैं एक छवि पर एक फॉर्म रखना चाहता हूं (जो पृष्ठभूमि नहीं है)। फ्लोट काम नहीं करता है, लेकिन क्या कुछ चर है जो इस समारोह को प्रदान करता है?सीएसएस का उपयोग कर एक छवि पर फ्लोट ऑब्जेक्ट?

जब आप किसी ऑब्जेक्ट को फ़्लोट करते हैं तो यह ऑब्जेक्ट के दोनों ओर टेक्स्ट को धक्का देता है। जो मैं खोज रहा हूं वह ऐसा कुछ नहीं है जो ऐसा नहीं करेगा, जो इसके नीचे क्या है इसके संबंध में बस तैर जाएगा।

उत्तर

24

आप चल तत्वों ऐसा नहीं है क्या के लिए क्या देख रहे हैं की कोशिश करो। एक फ़्लोटिंग तत्व अभी भी दस्तावेज़ प्रवाह का हिस्सा है, और आप एक तत्व चाहते हैं जो नहीं है।

उपयोग पूर्ण स्थिति दस्तावेज़ प्रवाह से बाहर है कि जिस तरह से यह अन्य तत्वों दूर धक्का नहीं होगा एक तत्व लेने के लिए, और आप अन्य तत्वों के शीर्ष पर जगह कर सकते हैं:

<div style="position:relative">  
    <img src="image.jpg" alt="" /> 
    <div style="position:absolute;left:0;top:0;"> 
    This text is on top of the image 
    </div> 
</div> 

position:relative कृत्यों के साथ तत्वों इसके अंदर बिल्कुल स्थित तत्वों के लिए मूल के रूप में, ताकि पाठ छवि के शीर्ष पर रखा गया हो और पृष्ठ के ऊपरी बाएं कोने पर नहीं।

0

यदि आप छवि को div के लिए पृष्ठभूमि छवि या (हाँ, मैं यह कह रहा हूं) तालिका को फॉर्म स्वरूपित करने के लिए उपयोग किया जाता है, तो फॉर्म छवि पर "फ्लोट" करेगा।

हैं कि अपनी आवश्यकताओं के लिए पर्याप्त नहीं है, बाहर की जाँच http://w3schools.com/css/css_positioning.asp

+0

मैं इसे पृष्ठभूमि नहीं बना सकता क्योंकि यह एक छविमैप है। मैं उस वेबसाइट पर एक नज़र डालेगा, लिंक के लिए धन्यवाद। – user494216

+1

@OP अगर यह एक छविमैप है, तो क्या इसे क्लिक करने योग्य होने की आवश्यकता नहीं है? इसके शीर्ष पर कुछ ऐसा होगा जो उस संबंध में असुविधा होगी? – Orbling

0

z-index संपत्ति

<html> 
<head> 
<style type="text/css"> 
img 
{ 
position:absolute; 
left:0px; 
top:0px; 
z-index:-1; 
} 
</style> 
</head> 

<body> 
<h1>This is a heading</h1> 
<img src="w3css.gif" width="100" height="140" /> 
<p>Because the image has a z-index of -1, it will be placed behind the text.</p> 
</body> 
</html> 
संबंधित मुद्दे