मैं HTML में एक छवि को दूसरे के ऊपर कैसे रखूं?

Question

मैं एक प्रोग्रामिंग पर एक शुरुआत कर रहा हूँ, एक पृष्ठ पर कई छवियों को दिखाने का प्रयास कर रहा हूँ। कुछ छवियों को दूसरों के ऊपर रखना है। इसे सरल बनाने के लिए, मैं कहता हूं कि मुझे नीला वर्ग चाहिए, नीले वर्ग के ऊपरी दाएं कोने में लाल वर्ग के साथ (लेकिन कोने में तंग नहीं)। मैं प्रदर्शन के मुद्दों के कारण कंपोज़िटिंग (इमेजमैजिक और इसी तरह) से बचने की कोशिश कर रहा हूं।

मैं बस एक दूसरे के सापेक्ष अतिव्यापी छवियों को स्थान देना चाहता हूं।

अधिक कठिन उदाहरण के रूप में, एक बड़ी छवि के अंदर रखे ओडोमीटर की कल्पना करें। छह अंकों के लिए, मुझे एक लाख अलग-अलग छवियों को संयोजित करने की आवश्यकता होगी, या यह सब मक्खी पर करना होगा, जहां सभी की जरूरत है कि छह छवियों को दूसरे के ऊपर रखना है।

Comments

आप स्प्राइट का उपयोग करके एक छवि के साथ ओडोमीटर कर सकते हैं

— जेसन

Answer 1

ठीक है, कुछ समय बाद, यहाँ मैं क्या उतरा:

.parent {
  position: relative;
  top: 0;
  left: 0;
}
.image1 {
  position: relative;
  top: 0;
  left: 0;
  border: 1px red solid;
}
.image2 {
  position: absolute;
  top: 30px;
  left: 30px;
  border: 1px green solid;
}

<div class="parent">
  <img class="image1" src="https://placehold.it/50" />
  <img class="image2" src="https://placehold.it/100" />
</div>

सबसे सरल उपाय के रूप में। अर्थात्:

एक रिश्तेदार div बनाएं जो पृष्ठ के प्रवाह में रखी गई है; आधार छवि को पहले सापेक्ष के रूप में रखें ताकि div जानता है कि यह कितना बड़ा होना चाहिए; पहली छवि के ऊपरी बाएँ के सापेक्ष पूर्ण के रूप में ओवरले रखें। रिश्तेदारों और निरपेक्ष लोगों को सही करने के लिए चाल है।

Comments

यह एक सुंदर समाधान है। यदि "a" की आईडी होती aऔर "b" की आईडी होती b, तो क्या इस जावास्क्रिप्ट कोड (सेटिंग xऔर yकुछ गणना द्वारा) की स्थिति को बदलने के लिए काम कर सकता था b?

— DDPWNAGE

बाईं ओर: 0 बहुत महत्वपूर्ण है! यह भूल गया और यह सफारी में काम नहीं किया। यह पता लगाने के लिए मुझे कुछ समय लगा।

— मारकुजा-रस

कोड स्निपेट चलाते समय, एक छवि दूसरे के ऊपर प्रदर्शित नहीं हो रही है।

— kojow7

@ kojow7 ने उन्हें दूसरे के शीर्ष पर दिखाने के लिए कोड स्निपेट अपडेट किया। :-)

— क्रेगो

@Me_developer आप इसे इस तरह नहीं करेंगे। आप ऑटो मार्जिन का उपयोग करेंगे। w3schools.com/howto/howto_css_image_center.asp

— क्रेगो

Answer 2

यह एक नंगे स्वरुप है जो मैंने एक छवि को दूसरे पर तैरने के लिए किया है।

img {
  position: absolute;
  top: 25px;
  left: 25px;
}
.imgA1 {
  z-index: 1;
}
.imgB1 {
  z-index: 3;
}

<img class="imgA1" src="https://placehold.it/200/333333">
<img class="imgB1" src="https://placehold.it/100">

स्रोत

Answer 3

यहाँ कोड है जो आपको विचार दे सकता है:

<style>
.containerdiv { float: left; position: relative; } 
.cornerimage { position: absolute; top: 0; right: 0; } 
</style>

<div class="containerdiv">
    <img border="0" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt=""">
    <img class="cornerimage" border="0" src="http://www.gravatar.com/avatar/" alt="">
<div>

JSFiddle

मुझे संदेह है कि एस्पो का समाधान असुविधाजनक हो सकता है क्योंकि इसके लिए आपको दोनों छवियों को बिल्कुल सही स्थिति में लाना होगा। आप पहले वाले को प्रवाह में स्थिति के लिए चाहते हो सकते हैं।

आमतौर पर, ऐसा करने का एक प्राकृतिक तरीका सीएसएस है। आप स्थिति रखते हैं: कंटेनर तत्व के सापेक्ष, और फिर उसके अंदर बिल्कुल स्थिति वाले बच्चे। दुर्भाग्य से, आप एक छवि को दूसरे के अंदर नहीं डाल सकते। इसलिए मुझे कंटेनर डिव की जरूरत थी। ध्यान दें कि मैंने इसे अपनी सामग्री के लिए ऑटोफिट बनाने के लिए एक फ्लोट बनाया था। इसे प्रदर्शित करना: इनलाइन-ब्लॉक को सैद्धांतिक रूप से भी काम करना चाहिए, लेकिन ब्राउज़र समर्थन वहां खराब है।

संपादित करें: मैंने अपनी बात को बेहतर ढंग से समझाने के लिए छवियों से आकार विशेषताओं को हटा दिया। यदि आप चाहते हैं कि कंटेनर की छवि अपने डिफ़ॉल्ट आकार की हो और आपको पहले से आकार का पता न हो, तो आप पृष्ठभूमि ट्रिक का उपयोग नहीं कर सकते । यदि आप करते हैं, तो यह एक बेहतर तरीका है।

Comments

यह मेरे लिए सबसे अच्छा समाधान है क्योंकि आपकी छवियों की चौड़ाई और ऊंचाई को निर्दिष्ट करने की आवश्यकता नहीं है और इसके परिणामस्वरूप बहुत अधिक पुन: प्रयोज्य होगा।

— इमान मोहम्मदी

Answer 4

एक मुद्दा मैंने देखा कि त्रुटियों का कारण हो सकता है कि रिक्टर के जवाब में, नीचे दिए गए कोड:

<img src="b.jpg" style="position: absolute; top: 30; left: 70;"/>

शैली के भीतर px इकाइयों को शामिल करना चाहिए जैसे।

<img src="b.jpg" style="position: absolute; top: 30px; left: 70px;"/>

इसके अलावा, जवाब ने ठीक काम किया। धन्यवाद।

Answer 5

आप pseudo elementsउनके मूल तत्व के सापेक्ष बिलकुल स्थिति में आ सकते हैं ।

यह आपको हर तत्व के साथ खेलने के लिए दो अतिरिक्त परतें प्रदान करता है - इसलिए एक छवि को दूसरे के शीर्ष पर रखना आसान हो जाता है - न्यूनतम और अर्थ मार्कअप (कोई खाली divs आदि) के साथ।

मार्कअप:

<div class="overlap"></div>

सीएसएस:

.overlap
{
    width: 100px;
    height: 100px;
    position: relative;
    background-color: blue;
}
.overlap:after
{
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    top: 5px;
    left: 5px;
    background-color: red;
}

यहां LIVE DEMO है

Answer 6

इसे करने का आसान तरीका पृष्ठभूमि-छवि का उपयोग करना है फिर बस उस तत्व में एक <img> डालें।

सीएसएस परतों का उपयोग करने का दूसरा तरीका है। इसमें आपकी सहायता के लिए एक टन संसाधन उपलब्ध है, बस सीएसएस परतों की खोज करें ।

Answer 7

केवल स्पष्टता के लिए इनलाइन शैली। एक वास्तविक CSS स्टाइलशीट का उपयोग करें।

<!-- First, your background image is a DIV with a background 
     image style applied, not a IMG tag. -->
<div style="background-image:url(YourBackgroundImage);">
    <!-- Second, create a placeholder div to assist in positioning 
         the other images. This is relative to the background div. -->
    <div style="position: relative; left: 0; top: 0;">
        <!-- Now you can place your IMG tags, and position them relative 
             to the container we just made -->   
        <img src="YourForegroundImage" style="position: relative; top: 0; left: 0;"/>
    </div>
</div>

Answer 8

इसमें थोड़ी देर हो सकती है लेकिन इसके लिए आप कर सकते हैं:

एचटीएमएल

<!-- html -->
<div class="images-wrapper">
  <img src="images/1" alt="image 1" />
  <img src="images/2" alt="image 2" />
  <img src="images/3" alt="image 3" />
  <img src="images/4" alt="image 4" />
</div>

एस.ए.एस.एस.

// In _extra.scss
$maxImagesNumber: 5;

.images-wrapper {
  img {
    position: absolute;
    padding: 5px;
    border: solid black 1px;
  }

  @for $i from $maxImagesNumber through 1 {
    :nth-child(#{ $i }) {
      z-index: #{ $maxImagesNumber - ($i - 1) };
      left: #{ ($i - 1) * 30 }px;
    }
  }
}

Answer 9

@ buti-oxa: पांडित्य नहीं है, लेकिन आपका कोड अमान्य है। HTML widthऔर heightविशेषताएँ इकाइयों के लिए अनुमति नहीं देती हैं; आप सीएसएस width:और height:गुणों के बारे में सोच रहे हैं। आपको टैग के text/cssसाथ एक सामग्री-प्रकार ( ; एस्पो का कोड देखें) प्रदान करना चाहिए <style>।

<style type="text/css"> 
.containerdiv { float: left; position: relative; } 
.cornerimage { position: absolute; top: 0; right: 0; } 
</style>

<div class="containerdiv">
    <img border="0" src="http://www.gravatar.com/avatar/" alt="" width="100" height="100">
    <img class="cornerimage" border="0" src="http://www.gravatar.com/avatar/" alt="" width="40" height="40">
<div>

में छोड़ px;कर widthऔर heightविशेषताओं के कारण एक रेंडरिंग इंजन को गंजा करना पड़ सकता है।

Answer 10

एक रिश्तेदार div बनाएं जो पृष्ठ के प्रवाह में रखी गई है; आधार छवि को पहले सापेक्ष के रूप में रखें ताकि div जानता है कि यह कितना बड़ा होना चाहिए; पहली छवि के ऊपरी बाएँ के सापेक्ष पूर्ण के रूप में ओवरले रखें। रिश्तेदारों और निरपेक्ष लोगों को सही करने के लिए चाल है।

Comments

मुझे लगता है कि एक संभावित कोड नमूना भविष्य के पाठकों को इस उत्तर में मदद कर सकता है।

— 5