आप दो <div> का ओवरलैप कैसे बनायेंगे?

Question

मुझे इस तरह से देखने के लिए दो div की आवश्यकता है:

    |               |
 ---|    LOGO       |------------------------
|   |_______________|  LINKS                |
|             CONTENT                       |

उन्हें बड़े करीने से बनाने का सबसे साफ / सबसे सुंदर तरीका क्या है? लोगो की एक निश्चित ऊँचाई और चौड़ाई होगी और यह पृष्ठ के ऊपरी किनारे को स्पर्श करेगा।

Answer 1

मैं इसे पसंद कर सकता हूं (सीएसएस और एचटीएमएल):

html,
body {
  margin: 0px;
}
#logo {
  position: absolute; /* Reposition logo from the natural layout */
  left: 75px;
  top: 0px;
  width: 300px;
  height: 200px;
  z-index: 2;
}
#content {
  margin-top: 100px; /* Provide buffer for logo */
}
#links {
  height: 75px;
  margin-left: 400px; /* Flush links (with a 25px "padding") right of logo */
}

<div id="logo">
  <img src="https://via.placeholder.com/200x100" />
</div>
<div id="content">
  
  <div id="links">dssdfsdfsdfsdf</div>
</div>

Comments

क्या सामग्री बनाने का कोई तरीका है बस लोगो द्वारा उपयोग की जाने वाली जगह से बचें?

— जेवियर

हम्म आप स्पष्ट कर सकते हैं? मुझे लगता है कि आप सिर्फ सामग्री के ऊपर लोगो चाहते हैं? यदि ऐसा है तो यह सिर्फ एक सामान्य प्रवाह है (इसलिए #logo से बाएं, ऊपर, स्थिति को हटा दें)। मुझे लगता है कि तुम कुछ और मतलब है! :)

— ओवेन

मुझे लगता है कि जो मतलब था वह सामग्री (पाठ) लोगो के चारों ओर लपेटने के लिए था

— डेवी

आह हम्म, मुझे पूरा यकीन है कि नहीं एक तत्व होने वाली समस्या को तैरना, या तैनात किया जा सकता है, लेकिन दोनों नहीं। जब तक वे कुछ प्रकार की फ्लोट विकसित नहीं करते हैं: केंद्र विचार ...

— ओवेन

Answer 2

दूसरे डिव में केवल नकारात्मक मार्जिन का उपयोग करें:

<div style="margin-top: -25px;">

और आप जो लेयरिंग चाहते हैं, उसे प्राप्त करने के लिए z-index प्रॉपर्टी को सेट करना सुनिश्चित करें।

Comments

यह अब तक का सबसे सरल तरीका है, और पृष्ठ की सामग्री पर मार्जिन-बॉटम का उपयोग करके आसानी से ओवरलैपिंग फुटर्स के लिए अनुकूलित किया जा सकता है। धन्यवाद!

— पीटर डेविस

यह समाधान DOCTYPE पर निर्भर करता है, है ना? क्योंकि यह HTML5 DOCTYPE के साथ काम नहीं किया जब मैंने कोशिश की।

— alumi

यह स्वीकृत उत्तर होना चाहिए, स्थिति निरपेक्ष समस्याओं का कारण बनती है।

— दिमित्री

Answer 3

पूर्ण या सापेक्ष स्थिति के साथ, आप ओवरलैपिंग के सभी प्रकार कर सकते हैं। आप शायद चाहते हैं कि लोगो को इस तरह से स्टाइल किया जाए:

div#logo {
  position: absolute;
  left: 100px; // or whatever
}

नोट: पूर्ण स्थिति की अपनी विलक्षणताएं हैं। आपको शायद थोड़ा प्रयोग करना होगा, लेकिन यह बहुत मुश्किल नहीं होना चाहिए कि आप क्या चाहते हैं।

Comments

क्या वह लोगो उस पाठ को ओवरलैप करने का कारण होगा जहाँ लिंक यद्यपि हैं? या यह लिंक को साइड में धकेल देगा?

नहीं, निरपेक्ष प्रभावी रूप से टैग को प्रवाह से हटाता है। यह ऐसा होगा जैसे कि यह वहाँ नहीं थे।

— sblundy

Answer 4

CSS का उपयोग करते हुए, आप लोगो div को पूर्ण स्थिति में सेट करते हैं, और z- क्रम को दूसरे div से ऊपर सेट करते हैं।

#logo
{
    position: absolute:
    z-index: 2000;
    left: 100px;
    width: 100px;
    height: 50px;
}

Answer 5

यदि आप चाहते हैं कि लोगो को जगह मिले, तो आप शायद इसे छोड़ कर तैरने से बेहतर हैं और फिर मार्जिन का उपयोग करके सामग्री को नीचे ले जाएं, इस तरह से:

#प्रतीक चिन्ह {
    बाईंओर तैरना;
    मार्जिन: 0 10px 10px 20px;
}

#सामग्री {
    मार्जिन: 10 पीएक्स 0 0 10 पीएक्स;
}

या जो भी मार्जिन आप चाहते हैं।