मेरा मार्जिन स्थिति के साथ क्यों काम नहीं कर रहा है: तय?

Question

JSFiddle Demo

मेरे पास एक हेडर के लिए एक div और सामग्री लपेटने के लिए एक div है।

किसी कारण से, मेरे पास हेडर के नीचे मार्जिन नहीं हो सकता है जो सामग्री को लपेटने के लिए बाध्य करता है। यह सिर्फ इसे पूरी तरह से अनदेखा करता है और मुझे नहीं पता कि क्यों।

क्या किसी को पता है कि इसके साथ क्या चल रहा है? जब मैं स्थिति को दूर करता हूं तो यह ऐसा नहीं करता है: निश्चित; शीर्षलेख पर विशेषता, लेकिन मैं शीर्ष पर तय करना चाहता हूं ताकि शीर्षलेख को स्क्रॉल करते समय हमेशा ध्यान में रखा जाए।

किसी को उम्मीद कर सकते हैं कि ऐसा क्यों होता है या कम से कम इसे क्या कहा जाता है, इसलिए मैं इसे Google कर सकता हूं।

body { 
 
    margin: 0; 
 
    padding: 0; 
 
\t font-family: arial; 
 
\t background: #5A9910; 
 
\t text-align: center; 
 
} 
 

 
/* ==========================Main wrap for page==*/ 
 
div.wrap { 
 
\t width: 100%; 
 
\t margin: 0 auto; 
 
\t text-align: left; 
 
} 
 

 
/* ==========================Header with logo==*/ 
 
div.header { 
 
\t position: fixed; 
 
\t width: 100%; 
 
\t background: #ffffff; 
 
\t -webkit-box-shadow: 0 8px 6px -6px #333; 
 
\t -moz-box-shadow: 0 8px 6px -6px #333; 
 
\t box-shadow: 0 8px 6px -6px #333; 
 
} 
 

 
/* ==========================Header logo image==*/ 
 
img.headerlogo { 
 
\t width: 30%; 
 
} 
 

 
/* ==========================Content wrapper==*/ 
 
div.contentwrap { 
 
\t width: 80%; 
 
\t height: 1600px; 
 
\t background: #ccc; 
 
\t margin: 0 auto; 
 
}

<div class="wrap"> 
 
    <div class="header"> 
 
     <p>Header</p> 
 
    </div> 
 
    <div class="contentwrap"> 
 
     <p>Test</p> 
 
    </div> 
 
</div>

Answer 1

मुझे लगता है कि आपको निश्चित रूप से निश्चित div की स्थिति घोषित करना है। सामग्री div

div.contentwrap { 
width: 80%; 
height: 1600px; 
background: #ccc; 
margin: 80px auto; 
} 

जांच इस बेला अगर आप की तरह काम करता है की जरूरत पर

div.header { 
position: fixed; 
width: 100%; 
background: #ffffff; 
top:20px; 
-webkit-box-shadow: 0 8px 6px -6px #333; 
-moz-box-shadow: 0 8px 6px -6px #333; 
box-shadow: 0 8px 6px -6px #333; 
} 

और आवंटित मार्जिन: https://jsfiddle.net/0cmvg92m/3/

Answer 2

क्योंकि हैडर की स्थिति तय हो गई है मार्जिन काम नहीं करता।

आपको अपने सामग्री पर पैडिंग-टॉप का उपयोग करना होगा।

Answer 3

आपके शीर्षलेख में संपत्ति position:fixed है। इसलिए हेडर पर लागू मार्जिन सामग्री अनुभाग को प्रभावित नहीं करता है।

इस समस्या को हल करने के लिए, आप आप position: fixed; को एक तत्व सेट करते हैं contentwrap तत्व

Answer 4

के लिए या तो मार्जिन या पैडिंग देने के लिए की जरूरत है, तो आप इसे "सामान्य दस्तावेज़ प्रवाह" से हटा दें। कल्पना करें कि आपकी वेबसाइट एक नदी है, और आप इसे ऊपर से देख रहे हैं। प्रत्येक तत्व उस नदी में एक चट्टान है। कोई भी margin आपने अपने तत्वों पर लागू किया है उन चट्टानों में से एक के आसपास एक बल क्षेत्र की तरह है।

जब आप उन चट्टानों में से position: fixed; सेट करते हैं, तो आप अनिवार्य रूप से नदी से बाहर खींच रहे हैं ताकि सार, मिट्टी के किनारे नदी के ऊपर तैर रही हो। चट्टान और नदी का प्रवाह अभी भी आपके जैसा ही दिखाई देगा, क्योंकि आप सीधे ऊपर देख रहे हैं, लेकिन चट्टान अब नदी के प्रवाह से बातचीत नहीं कर रहा है।

यदि आपने उस चट्टान पर margin लागू किया था, तो चट्टान के चारों ओर बल क्षेत्र अब किसी भी पानी को दूर नहीं रख रहा है, क्योंकि चट्टान मिडयर में हो रहा है, इसकी position: fixed; संपत्ति के लिए धन्यवाद। तो वहां कोई पानी या अन्य चट्टान नहीं हैं (अन्य तत्व) जिनसे इसे खुद को दूर करने की आवश्यकता है। आपके चट्टान के बल क्षेत्र (आपके तत्व का मार्जिन) पतली हवा के खिलाफ धक्का दे रहा है, इसलिए नदी में कुछ भी प्रभावित नहीं होगा।

लेकिन एक तस्वीर के लायक है एक हजार शब्दों के, के रूप में कहावत है:

यह आदमी वास्तव में पीसा की झुकी मीनार लात नहीं है, लेकिन यह यकीन है कि यह की तरह लग रहा है! इस उदाहरण में, पीसा के लीनिंग टॉवर समेत तस्वीर की पृष्ठभूमि, आपका पृष्ठ (या आपका 'सामान्य दस्तावेज़ प्रवाह') है, और आदमी position: fixed; के साथ लागू एक तत्व (या हमारे अंतिम उदाहरण से चट्टान) है।

स्थिति संपत्ति here और अधिक अद्यतित, here के बारे में और पढ़ें।

एक तरीका यह तय करने के लिए यकीन है कि यह शीर्ष पर और z विमान पर हर दूसरे तत्व ऊपर तैनात है बनाने के लिए top: 20px; z-index: 2; करने के लिए अपने शीर्ष लेख निर्धारित करते हैं, और उसके बाद अपने शरीर को दे रहा है position: relative; और एक margin-top की ऊंचाई के बराबर हेडर (इस मामले में, 52px) प्लस हेडर की top संपत्ति का मान। अपने हेडर और अपने शरीर के बीच की जगह को बढ़ाने के लिए, बस margin-top राशि बढ़ाएं। इसे कभी-कभी "चिपचिपा हेडर/पाद लेख" दृष्टिकोण कहा जाता है।

body { 
 
    margin: 0; 
 
    padding: 0; 
 
    font-family: arial; 
 
    background: #5A9910; 
 
    text-align: center; 
 
} 
 

 
/* ==========================Main wrap for page==*/ 
 
div.wrap { 
 
    width: 100%; 
 
    margin: 0 auto; 
 
    text-align: left; 
 
} 
 

 
/* ==========================Header with logo==*/ 
 
div.header { 
 
    position: fixed; 
 
    top: 20px; 
 
    z-index: 2; 
 
    width: 100%; 
 
    background: #ffffff; 
 
    -webkit-box-shadow: 0 8px 6px -6px #333; 
 
    -moz-box-shadow: 0 8px 6px -6px #333; 
 
    box-shadow: 0 8px 6px -6px #333; 
 
} 
 

 
/* ==========================Header logo image==*/ 
 
img.headerlogo { 
 
    width: 30%; 
 
} 
 

 
/* ==========================Content wrapper==*/ 
 
div.contentwrap { 
 
    width: 80%; 
 
    height: 1600px; 
 
    background: #ccc; 
 
    margin: 0 auto; 
 
    position: relative; 
 
    margin-top: 72px; 
 
}

<div class="wrap"> 
 
    <div class="header"> 
 
     <p>Header</p> 
 
    </div> 
 
    <div class="contentwrap"> 
 
     <p>Test</p> 
 
    </div> 
 
</div>

पी.एस.: यहाँ एक डेमो है position: fixed; एक सीएसएस संपत्ति है (एक संपत्ति-मूल्य जोड़ी, सटीक होने के लिए), एक HTML विशेषता नहीं है।