एक div को दूसरे div पर ओवरले कैसे करें

Question

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

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

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

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

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

Comments

इस सवाल में ऐसा नहीं है, लेकिन अगर आपके पास एक div है, तो दूसरा div अंदर या पूरी तरह से आंशिक रूप से नकाबपोश हो सकता है overflow: hidden, overflow: visibleइसके बजाय उपयोग करें ।

— क्रिस्टोफ़ रूसो

Answer 1

#container {
  width: 100px;
  height: 100px;
  position: relative;
}
#navi,
#infoi {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
#infoi {
  z-index: 10;
}

<div id="container">
  <div id="navi">a</div>
  <div id="infoi">
    <img src="https://appharbor.com/assets/images/stackoverflow-logo.png" height="20" width="32" />b
  </div>
</div>

मैं सुझाव देना चाहूंगा कि position: relativeबच्चे के तत्वों के बारे में जानें position: absolute।

Comments

एलेक्स आपकी मदद के लिए धन्यवाद, लेकिन अब मैं जो कुछ भी पा रहा हूं वह यह है कि जब मैं अपनी विंडो को आकार देता हूं और इसे छोटा होने के लिए खींचता हूं, तो मेरी जानकारी छवि माता-पिता के साथ नहीं रह रही है। मूल रूप से यह चाहते हैं कि अभिभावक डिव के साथ आगे बढ़ें और एक ही स्थिति में बहुत अधिक रहें, भले ही स्क्रीन को कुछ आकार दिया गया हो।

— tonyf

@tonsils: एलेक्स के निर्देश आपको वांछित परिणाम देने चाहिए, इसलिए आपके द्वारा बताई गई समस्या का कारण कुछ और होना चाहिए। क्या आप हमें कोड (HTML + CSS) का नमूना प्रदान कर सकते हैं ताकि हम आपकी सहायता कर सकें?

— एरिक टोइरा सिलफेवरवार्ड

absoluteली पोजिशन एलिमेंट्स उनके निकटतम स्पष्ट रूप से पोस्ट किए गए ( position:absolute|relative|fixedपेरेंट एलिमेंट) के सापेक्ष तैनात हैं । अभी और स्पष्टीकरण ... jsfiddle.net/p5jkc8gz

— xandercoded

मामले के आधार पर, यह अनुकूलित किया जा सकता है। मेरी स्थिति में मुझे शीर्ष पर रहने के लिए #navi की आवश्यकता नहीं थी: 0 बाएँ: 0, और एक सामान्य मामले के रूप में यदि आपके पास HTML कोड है, तो यह तब तक रहने वाला है जब तक HTML पेड़ पार्स होता है। तो शायद इस मामले में कि परिभाषा आवश्यक नहीं है।

— फैब्रिकियो PH

Answer 2

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

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

समस्या

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

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

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

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

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

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

• top
• right
• bottom
• left

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

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

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

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

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

अन्य पहलू से अवगत होना स्टैक ऑर्डर है - या तत्वों को जेड-दिशा में कैसे स्टैक किया जाता है। यहाँ अवश्य पता होना चाहिए कि तत्वों का स्टैक ऑर्डर HTML संरचना में उनके ऑर्डर के रिवर्स द्वारा परिभाषित किया गया है। निम्नलिखित उदाहरण पर विचार करें:

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

इस उदाहरण में, यदि दो <div>तत्वों को पृष्ठ पर एक ही स्थान पर तैनात किया गया था, तो <div>Top</div>तत्व तत्व को कवर करेगा <div>Bottom</div>। चूंकि HTML संरचना में इसके <div>Top</div>बाद <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">ताकि हम एक नया स्थान संदर्भ बना सकें।

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

तब देकर एक नई स्थिति प्रसंग बना .wrapperएक position: relative।

.wrapper {
  position: relative;
}

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

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

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

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

और वहां हमारे पास है, #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>

एक वैकल्पिक (ग्रिड) समाधान

यहां तत्व को दूर से .naviतत्व के साथ स्थित करने के लिए CSS ग्रिड का उपयोग करके एक वैकल्पिक समाधान #infoiदिया गया है। मैंने gridइसे यथासंभव स्पष्ट करने के लिए क्रिया गुणों का उपयोग किया है।

:root {
  --columns: 12;
}

/*
*  Setup the wrapper as a Grid element, with 12 columns, 1 row
*/
.wrapper {
  display: grid;
  grid-template-columns: repeat(var(--columns), 1fr);
  grid-template-rows: 40px;
}

/*
*  Position the .navi element to span all columns
*/
.navi {
  grid-column-start: 1;
  grid-column-end: span var(--columns);
  grid-row-start: 1;
  grid-row-end: 2;
  
  /*
  *  Styling only, the below can be changed or removed
  *  depending on your use case
  */
  background-color: #eaeaea;
}


/*
*  Position the #infoi element in the last column, and center it
*/
#infoi {
  grid-column-start: var(--columns);
  grid-column-end: span 1;
  grid-row-start: 1;
  place-self: center;
}

<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पर उपयोग करने के बजाय #infoi, हम उपयोग करेंगे position: relative। यह हमें #infoiतत्व को तत्व के नीचे उसकी डिफ़ॉल्ट स्थिति से बदलने की अनुमति देता है .navi। इसके साथ position: relativeहम topइसे अपने डिफ़ॉल्ट स्थान से ऊपर ले जाने के लिए एक नकारात्मक मान का उपयोग कर सकते हैं , और कुछ पिक्सेल के leftमान का 100%उपयोग करके 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>

Comments

यह सबसे उपयोगी प्रविष्टि IMO है क्योंकि यह बताता है कि यह क्यों काम करता है!

— ब्रेट वेनराउब

यह शायद इस बात का सबसे अच्छा विवरण है कि मैंने अभी तक किस तरह से काम किया है। संक्षिप्त करें, लेकिन इसे प्राप्त करने के लिए पर्याप्त गहरा।

— मार्सेल २

उत्तर की गुणवत्ता पर डिट्टो। सबसे स्पष्ट स्पष्टीकरण मैंने देखा है।

— वेड हैटलर

यह विशेष रूप से सीएसएस में नए लोगों के लिए एक महान जवाब है

— अली इज्जत ओदेह

— कुदोस

Answer 3

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

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

Comments

क्या आप एक उदाहरण प्रदान कर सकते हैं?

— फैब्रिकियो PH

पोस्ट किए गए तत्वों के बारे में नोट महत्वपूर्ण है।

— लॉरेंस Dol

यह उत्तर इतना अधूरा है कि इसकी व्याख्या करने के लिए पूरे पद की आवश्यकता है। स्टैकिंग संदर्भों को देखें।

— बोजिदार स्टेंचव

Answer 4

नया ग्रिड सीएसएस विनिर्देश कहीं अधिक सुरुचिपूर्ण समाधान प्रदान करता है। का उपयोग करते हुए position: absoluteओवरलैप या स्केलिंग मुद्दों को जन्म दे सकता है, जबकि ग्रिड गंदा सीएसएस हैक्स से आप बचत होगी।

सबसे न्यूनतम ग्रिड ओवरले उदाहरण:

एचटीएमएल

<div class="container">
  <div class="content">This is the content</div>
  <div class="overlay">Overlay - must be placed under content in the HTML</div>
</div>

सीएसएस

.container {
  display: grid;
}

.content, .overlay {
  grid-area: 1 / 1;
}

बस। यदि आप Internet Explorer के लिए निर्माण नहीं करते हैं, तो आपका कोड संभवतः सबसे अधिक काम करेगा।

Comments

यह शीर्ष उत्तर होना चाहिए।

— इनलाइन

बेहतर जवाब। चयनित उत्तर का पुनर्मूल्यांकन किया जाना चाहिए।

— अब्दुलजी

सही समाधान

— डेनिज़ दा किंग

Answer 5

यहाँ सीएसएस पर आधारित एक सरल समाधान 100% है। "गुप्त" display: inline-blockआवरण तत्व में उपयोग करना है। vertical-align: bottomछवि में 4px गद्दी कि कुछ ब्राउज़र तत्व के बाद जोड़ने काबू पाने के लिए एक हैक है।

सलाह : यदि रैपर से पहले तत्व इनलाइन है तो वे नेस्टेड को समाप्त कर सकते हैं। इस मामले में आप एक कंटेनर के अंदर "आवरण लपेट सकते हैं" display: block- आमतौर पर एक अच्छा और पुराना div।

.wrapper {
    display: inline-block;
    position: relative;
}

.hover {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 188, 212, 0);
    transition: background-color 0.5s;
}

.hover:hover {
    background-color: rgba(0, 188, 212, 0.8);
    // You can tweak with other background properties too (ie: background-image)...
}

img {
    vertical-align: bottom;
}

<div class="wrapper">
    <div class="hover"></div>
    <img src="http://placehold.it/450x250" />
</div>

Answer 6

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

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>

Answer 7

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

#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>

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

Answer 8

यहां एक और div पर एक लोडिंग आइकन के साथ ओवरले प्रभाव लाने के लिए एक सरल उदाहरण है।

<style>
    #overlay {
        position: absolute;
        width: 100%;
        height: 100%;
        background: black url('icons/loading.gif') center center no-repeat; /* Make sure the path and a fine named 'loading.gif' is there */
        background-size: 50px;
        z-index: 1;
        opacity: .6;
    }
    .wraper{
        position: relative;
        width:400px;  /* Just for testing, remove width and height if you have content inside this div */
        height:500px; /* Remove this if you have content inside */
    }
</style>

<h2>The overlay tester</h2>
<div class="wraper">
    <div id="overlay"></div>
    <h3>Apply the overlay over this div</h3>
</div>

इसे यहाँ आज़माएँ: http://jsbin.com/fotozolucu/edit?html,css,output