2015-09-18 10 views
5

msdn से हवाला देते हुए:सीएसएस स्थिति पूर्ण - अगला स्थान तत्व शरीर है?

"ऑब्जेक्ट पेरेंट तत्व की स्थिति- या करने के लिए शरीर वस्तु को किस स्थिति में है, तो अपनी मूल तत्व तैनात नहीं है"

कहते हैं कि मैं एक div सेट करने देता है नीचे आयाम के साथ कुछ आयाम के साथ 0; और छोड़ दिया: 0; यह शरीर के निचले हिस्से में नहीं बल्कि viewport के निचले बाएं स्थान पर स्थित नहीं होगा। इसके अलावा शरीर को मार्जिन देते समय - div अभी भी viewport के निचले बाएं हिस्से में होगा।

मुझे पता है कि इन गुणों के साथ कैसे काम करना है, लेकिन मैं तर्क की तलाश में हूं। क्या यह वह शरीर नहीं है जिसके लिए पूर्ण ग्यारह स्थित नहीं है जब कोई अन्य पूर्वज नहीं रखा जाता है? धन्यवाद!

यहाँ बेला है: http://jsfiddle.net/picbig/0p6rgv8f/

HTML:

<div id="large_box_greater_than_viewport"></div> 
<div id="absolute_cnt"></div> 

सीएसएस:

body{ 
    margin-left: 200px; 
} 
#large_box_greater_than_viewport{ 
    width: 900px; 
    height: 10000px; 
    background: red; 
} 
#absolute_cnt{ 
    position: absolute; 
    width: 65%; 
    bottom: 0; 
    left: 0; 
    height: 80px; 
    background: rgba(0,0,0,.7); 
} 
+0

rblarson के रूप में लिखा है: जब स्थिति: रिश्तेदार शरीर तत्व यह शरीर की तह तक ले जाता है पर सेट है। लेकिन क्या एमएसडीएन के बयान के अनुसार शरीर पर यह सेटिंग डिफ़ॉल्ट नहीं होनी चाहिए (और यह बताते हुए कई अन्य स्रोत)? –

उत्तर

4

बिल्कुल स्थित तत्वों को उनके युक्त ब्लॉक के सापेक्ष स्थित किया जाता है।

fixedinitial containing block के संबंध में स्थित तत्वों को स्थानांतरित करता है जो viewport के आयाम लेते हैं।

प्रारंभिक धारक ब्लॉक

धारक ब्लॉक, जिसमें मूल तत्व रहता है एक आयत प्रारंभिक ब्लॉक युक्त कहा जाता है। निरंतर मीडिया के लिए, इसमें व्यूपोर्ट के आयाम हैं और कैनवास मूल पर लगी हुई है; यह पेजेड मीडिया के लिए पृष्ठ क्षेत्र है।

और absolute तैनात तत्वों को उनके धारक ब्लॉक जो static के अलावा और कुछ का एक position साथ निकटतम पूर्वज द्वारा स्थापित है के लिए सम्मान करते हैं। यानी fixed, absolute या relative

प्रमुख मुद्दा है:

तो ऐसी कोई पूर्वज है, धारक ब्लॉक प्रारंभिक धारक ब्लॉक है।

इसलिए <body> अंदर है कि पूर्ण स्थिति में तत्व अर्थात व्यूपोर्ट प्रारंभिक युक्त ब्लॉक करने के लिए <body> खुद के लिए सम्मान के साथ रखा नहीं किया जाएगा, लेकिन,।

http://www.w3.org/TR/CSS2/visudet.html#containing-block-details

+0

तो यह वास्तव में व्यूपोर्ट है .... –

+1

के लिए धन्यवाद हमेशा mdn पर जाने से पहले w3.org को पढ़ना चाहिए, msdn ... धन्यवाद –

3

आप शरीर की स्थिति को निर्धारित करने की आवश्यकता:

body{ 
    margin-left: 200px; 
    position:relative; 
} 
+0

सही है - एक बार शरीर को स्थिति में सेट किया जाता है: रिश्तेदार; यह शरीर के नीचे चला जाता है लेकिन क्या यह नहीं होना चाहिए कि शरीर पर सेटिंग msdn के कथन के अनुसार डिफ़ॉल्ट हो (और यह बताते हुए कई अन्य स्रोत)? –

+0

मेरा मानना ​​है कि सभी तत्वों के लिए डिफ़ॉल्ट सेटिंग 'स्थिति: स्थिर है;' – rblarsen

+0

हाँ शरीर से अलग है क्योंकि मैं हमेशा कम से कम विश्वास करता हूं - तब मेरे एक छात्र ने मुझसे यह प्रश्न पूछा और मैं उसे एक स्वीकार्य उत्तर नहीं दे सका। –

-1

1)। हां आप टैग को पूर्ण स्थिति दे सकते हैं, लेकिन आपको उस टैग को अन्य संबंधित टैग के साथ स्थिति के साथ रखना होगा।

2)। या आप इसे कार्यक्षमता से पहले के बाद कर सकते हैं।

0

मैंने विभिन्न ब्राउज़रों में कुछ पैटर्न की कोशिश की, और आप सही हैं!

ऑब्जेक्ट शरीर के सापेक्ष स्थित नहीं है जब तक कि शरीर भी स्थित न हो!

यदि शरीर नहीं स्थित है, तो वस्तु व्यूपोर्ट के सापेक्ष स्थित है।

संबंधित मुद्दे