html - एक और div पर एक div ओवरले कैसे करें




css position (4)

मैं सीडी में बहुत ज्यादा कोडर नहीं हूं और न ही एक विशेषज्ञ हूं लेकिन मैं अभी भी अपने वेब डिज़ाइन में अपना विचार उपयोग कर रहा हूं। मैंने विभिन्न संकल्पों का भी प्रयास किया है:

#wrapper {
  margin: 0 auto;
  width: 901px;
  height: 100%;
  background-color: #f7f7f7;
  background-image: url(images/wrapperback.gif);
  color: #000;
}
#header {
  float: left;
  width: 100.00%;
  height: 122px;
  background-color: #00314e;
  background-image: url(images/header.jpg);
  color: #fff;
}
#menu {
  float: left;
  padding-top: 20px;
  margin-left: 495px;
  width: 390px;
  color: #f1f1f1;
}
<div id="wrapper">
  <div id="header">
    <div id="menu">
      menu will go here
    </div>
  </div>
</div>

बेशक उनमें से दोनों के चारों ओर एक रैपर होगा। आप मेनू div के स्थान को नियंत्रित कर सकते हैं जो बाएं मार्जिन और शीर्ष स्थितियों के साथ हेडर div के भीतर प्रदर्शित किया जाएगा। यदि आप चाहें तो आप div मेनू को फ़्लोट करने के लिए भी सेट कर सकते हैं। उम्मीद है की यह मदद करेगा।

उम्मीद है कि कोई सहायता कर सकता है लेकिन मुझे किसी व्यक्तिगत div पर एक व्यक्तिगत div को ओवरले करने में सहायता की आवश्यकता है।

मेरा कोड इस तरह दिखता है:

<div class="navi"></div>
<div id="infoi">
    <img src="info_icon2.png" height="20" width="32"/>
</div>

दुर्भाग्य से मैं div#infoi अंदर div#infoi या img घोंसला नहीं कर सकता।

दिखाए गए अनुसार इसे दो अलग-अलग div#infoi होना चाहिए, लेकिन मुझे यह जानने की ज़रूरत है कि मैं div#infoi पर div#infoi को कैसे रख सकता div.navi और दाईं तरफ और div.navi शीर्ष पर केंद्रित div.navi

इसे प्राप्त करने में किसी भी मदद की सराहना करेंगे।


यह वही चीज़ है जिसकी आपको आवश्यकता है:

function showFrontLayer() {
  document.getElementById('bg_mask').style.visibility='visible';
  document.getElementById('frontlayer').style.visibility='visible';
}
function hideFrontLayer() {
  document.getElementById('bg_mask').style.visibility='hidden';
  document.getElementById('frontlayer').style.visibility='hidden';
}
#bg_mask {
  position: absolute;
  top: 0;
  right: 0;  bottom: 0;
  left: 0;
  margin: auto;
  margin-top: 0px;
  width: 981px;
  height: 610px;
  background : url("img_dot_white.jpg") center;
  z-index: 0;
  visibility: hidden;
} 

#frontlayer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 70px 140px 175px 140px;
  padding : 30px;
  width: 700px;
  height: 400px;
  background-color: orange;
  visibility: hidden;
  border: 1px solid black;
  z-index: 1;
} 


</style>
<html>
  <head>
    <META HTTP-EQUIV="EXPIRES" CONTENT="-1" />

  </head>
  <body>
    <form action="test.html">
      <div id="baselayer">

        <input type="text" value="testing text"/>
        <input type="button" value="Show front layer" onclick="showFrontLayer();"/> Click 'Show front layer' button<br/><br/><br/>

        Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text
        Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text
        Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing textsting text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text
        <div id="bg_mask">
          <div id="frontlayer"><br/><br/>
            Now try to click on "Show front layer" button or the text box. It is not active.<br/><br/><br/>
            Use position: absolute to get the one div on top of another div.<br/><br/><br/>
            The bg_mask div is between baselayer and front layer.<br/><br/><br/>
            In bg_mask, img_dot_white.jpg(1 pixel in width and height) is used as background image to avoid IE browser transparency issue;<br/><br/><br/>
            <input type="button" value="Hide front layer" onclick="hideFrontLayer();"/>
          </div>
        </div>
      </div>
    </form>
  </body>
</html>


स्टाइल z-index:1; साथ एक div का उपयोग करके z-index:1; और position: absolute; आप किसी भी अन्य div पर अपने div को ओवरले कर सकते हैं।

z-index उस क्रम को निर्धारित करता है जिसमें divs 'stack' है। एक उच्च z-index एक div एक निचले z-index साथ एक div के सामने दिखाई देगा। ध्यान दें कि यह संपत्ति केवल तैनात तत्वों के साथ काम करती है


स्वीकार्य समाधान बहुत अच्छा काम करता है, लेकिन आईएमओ के पास एक स्पष्टीकरण की कमी है कि यह क्यों काम करता है। नीचे दिया गया उदाहरण मूलभूत आधार पर उबला हुआ है और महत्वपूर्ण सीएसएस को गैर-प्रासंगिक स्टाइल सीएसएस से अलग करता है। बोनस के रूप में, मैंने सीएसएस पोजीशनिंग कैसे काम करता है, इसकी एक विस्तृत व्याख्या भी शामिल की है।

TLDR; यदि आप केवल कोड चाहते हैं, तो परिणाम तक नीचे स्क्रॉल करें।

समस्या

2 अलग-अलग, भाई, तत्व हैं और लक्ष्य दूसरे तत्व (जानकारी की एक id के साथ) को infoi इसलिए यह पिछले तत्व ( infoi वर्ग के साथ) में दिखाई देता है। एचटीएमएल संरचना को बदला नहीं जा सकता है।

प्रस्तावित समाधान

वांछित परिणाम प्राप्त करने के लिए हम दूसरे तत्व को स्थानांतरित करने जा रहे हैं, या स्थिति, जिसे हम #infoi कॉल करेंगे, इसलिए यह पहले तत्व के भीतर दिखाई देता है, जिसे हम कॉल करेंगे .navi । विशेष रूप से, हम चाहते हैं #infoi के शीर्ष दाएं कोने में स्थित होना .navi

सीएसएस स्थिति आवश्यक ज्ञान

सीएसएस में स्थिति तत्वों के लिए कई गुण हैं। डिफ़ॉल्ट रूप से, सभी तत्व position: static । इसका अर्थ यह है कि तत्व कुछ अपवादों के साथ, एचटीएमएल संरचना में अपने आदेश के अनुसार तैनात किया जाएगा।

अन्य position मान relative , absolute , और fixed । तत्वों की position को इन 3 मानों में से किसी एक को सेट करके अब यह संभव है कि तत्व को स्थिति देने के लिए निम्न 4 गुणों के संयोजन का उपयोग करें:

  • top
  • right
  • bottom
  • left

दूसरे शब्दों में, position: absolute निर्धारित करके position: absolute , हम पृष्ठ के शीर्ष से तत्व 100px को स्थिति में रखने के लिए top: 100px जोड़ सकते हैं। इसके विपरीत, यदि हम bottom: 100px सेट करते हैं bottom: 100px तत्व पृष्ठ के निचले हिस्से से 100px पर रखा जाएगा।

यहां बताया गया है कि कई सीएसएस नवागंतुक खो गए हैं - position: absolute संदर्भ का एक फ्रेम है। उपर्युक्त उदाहरण में, संदर्भ का फ्रेम body तत्व है। position: absolute top: 100px साथ position: absolute top: 100px मतलब है कि तत्व तत्व तत्व के शीर्ष से 100px स्थित है।

संदर्भ की स्थिति फ्रेम, या स्थिति संदर्भ, किसी मूल तत्व की position को position के अलावा किसी अन्य मूल्य पर सेट करके बदला जा सकता है position: static । यही है, हम अभिभावक तत्व देकर एक नया स्थिति संदर्भ बना सकते हैं:

  • position: absolute;
  • position: relative;
  • position: fixed;

उदाहरण के लिए, यदि कोई <div class="parent"> तत्व दिया गया है position: relative , कोई भी बाल तत्व <div class="parent"> उनके स्थिति संदर्भ के रूप में करता है। यदि किसी बच्चे के तत्व को position: absolute दी position: absolute और top: 100px , तत्व <div class="parent"> तत्व के शीर्ष से 100px रखा जाएगा, क्योंकि <div class="parent"> अब स्थिति संदर्भ है ।

इसके बारे में जागरूक होने वाला अन्य कारक स्टैक ऑर्डर है - या जेड-दिशा में तत्वों को कैसे रखा जाता है। यहां अवश्य पता होना चाहिए कि तत्वों का ढेर क्रम, डिफ़ॉल्ट रूप से, HTML संरचना में उनके आदेश के विपरीत द्वारा परिभाषित किया गया है। निम्नलिखित उदाहरण पर विचार करें:

<body>
  <div>Bottom</div>
  <div>Top</div>
</body> 

इस उदाहरण में, यदि पृष्ठ पर एक ही स्थान पर दो <div> तत्वों को स्थान दिया गया था, तो <div>Top</div> तत्व <div>Bottom</div> तत्व को कवर करेगा। चूंकि <div>Top</div> HTML संरचना में <div>Bottom</div> बाद आता है, इसमें उच्च स्टैकिंग ऑर्डर होता है।

div {
  position: absolute;
  width: 50%;
  height: 50%;
}

#bottom {
  top: 0;
  left: 0;
  background-color: blue;
}

#top {
  top: 25%;
  left: 25%;
  background-color: red;
}
<div id="bottom">Bottom</div>
<div id="top">Top</div>

z-index या order गुणों का उपयोग करके स्टैकिंग ऑर्डर को सीएसएस के साथ बदला जा सकता है।

हम इस मुद्दे में स्टैकिंग ऑर्डर को अनदेखा कर सकते हैं क्योंकि तत्वों की प्राकृतिक HTML संरचना का अर्थ है कि जिस तत्व को हम top पर दिखाना चाहते हैं वह अन्य तत्व के बाद आता है।

तो, हाथ की समस्या पर वापस - हम इस मुद्दे को हल करने के लिए स्थिति संदर्भ का उपयोग करेंगे।

समाधान

जैसा कि ऊपर बताया गया है, हमारा लक्ष्य #infoi तत्व को स्थान देना है, इसलिए यह .navi तत्व के भीतर प्रकट होता है। ऐसा करने के लिए, हम .navi और #infoi तत्वों को एक नए तत्व <div class="wrapper"> #infoi में #infoi <div class="wrapper"> ताकि हम एक नया स्थिति संदर्भ बना सकें।

<div class="wrapper">
  <div class="navi"></div>
  <div id="infoi"></div>
</div>

फिर एक स्थिति को .wrapper करके एक नया स्थिति संदर्भ बनाएं position: relative

.wrapper {
  position: relative;
}

इस नए स्थिति संदर्भ के साथ, हम #infoi भीतर .wrapper स्थिति कर सकते हैं। सबसे पहले, #infoi एक position: absolute , हमें #infoi पूरी तरह से स्थिति में #infoi इजाजत देता है।

फिर ऊपर-दाएं कोने में #infoi तत्व को स्थिति देने के लिए top: 0 और right: 0 जोड़ें। याद रखें, क्योंकि #infoi तत्व अपने स्थिति संदर्भ के रूप में .wrapper का उपयोग कर रहा है, यह .wrapper तत्व के ऊपरी दाएं भाग में .wrapper

#infoi {
  position: absolute;
  top: 0;
  right: 0;
}

क्योंकि .wrapper केवल .navi लिए एक कंटेनर है, .navi #infoi के शीर्ष दाएं कोने में स्थित है। #infoi के शीर्ष दाएं कोने में स्थित होने का प्रभाव देता है।

और वहां हमारे पास है, #infoi अब #infoi के शीर्ष दाएं कोने में .navi

परिणाम

नीचे दिया गया उदाहरण मूलभूत बातें उबला हुआ है, और इसमें कुछ न्यूनतम स्टाइल शामिल है।

/*
*  position: relative gives a new position context
*/
.wrapper {
  position: relative;
}

/* 
*  The .navi properties are for styling only
*  These properties can be changed or removed
*/
.navi {
  background-color: #eaeaea;
  height: 40px;
}


/*
*  Position the #infoi element in the top-right
*  of the .wrapper element
*/
#infoi {
  position: absolute;
  top: 0;
  right: 0;
  
  /*
  *  Styling only, the below can be changed or removed
  *  depending on your use case
  */
  height: 20px;
  padding: 10px 10px;
}
<div class="wrapper">
  <div class="navi"></div>
  <div id="infoi">
    <img src="http://via.placeholder.com/32x20/000000/ffffff?text=?" height="20" width="32"/>
  </div>
</div>

वैकल्पिक (नो रैपर) समाधान

इस मामले में हम किसी भी HTML को संपादित नहीं कर सकते हैं, जिसका अर्थ है कि हम एक रैपर तत्व नहीं जोड़ सकते हैं, हम अभी भी वांछित प्रभाव प्राप्त कर सकते हैं।

position: absolute का उपयोग करने के बजाय position: absolute #infoi तत्व पर position: absolute , हम position: relative उपयोग करेंगे position: relative । यह हमें #infoi तत्व को #infoi तत्व के नीचे इसकी डिफ़ॉल्ट स्थिति से #infoi करने की अनुमति देता है। position: relative साथ position: relative हम इसे डिफ़ॉल्ट स्थिति से ऊपर ले जाने के लिए नकारात्मक top मान का उपयोग कर सकते हैं, और left: calc(100% - 52px) का उपयोग करके 100% घटाकर कुछ पिक्सल का left: calc(100% - 52px) , left: calc(100% - 52px) पक्ष।

/* 
*  The .navi properties are for styling only
*  These properties can be changed or removed
*/
.navi {
  background-color: #eaeaea;
  height: 40px;
  width: 100%;
}


/*
*  Position the #infoi element in the top-right
*  of the .wrapper element
*/
#infoi {
  position: relative;
  display: inline-block;
  top: -40px;
  left: calc(100% - 52px);
  
  /*
  *  Styling only, the below can be changed or removed
  *  depending on your use case
  */
  height: 20px;
  padding: 10px 10px;
}
<div class="navi"></div>
<div id="infoi">
  <img src="http://via.placeholder.com/32x20/000000/ffffff?text=?" height="20" width="32"/>
</div>





overlay