किसी तत्व को प्रवाह से कैसे निकालें?

Question

मुझे पता position: absoluteहै कि प्रवाह से एक तत्व पॉप जाएगा और यह अपने पड़ोसियों के साथ बातचीत करना बंद कर देता है।

इसे प्राप्त करने के लिए और क्या तरीके हैं?

Comments

क्या आपका मतलब है कि इसे पूरी तरह से पृष्ठ से हटा दें, या इसे अदृश्य बना दें? "अपने पड़ोसियों के साथ बातचीत" से आपका क्या मतलब है?

— जेसन हॉल

आप क्या हासिल करने का प्रयास कर रहे हैं?

— griegs

मुझे लगा कि ऐसा करने का एक तरीका है और मुझे याद नहीं आ रहा है इसलिए मैं स्टैवेरोफ़्लो में बदल गया :) स्थिति: पूर्ण काम करता है लेकिन मैं बस सोच रहा था

— समर्पित

उपयोगी उत्तर: stackoverflow.com/a/11917186/11298742

— ludovico

Answer 1

कोई नहीं?

मेरा मतलब है, लेआउट से इसे पूरी तरह से हटाने के अलावा display: none, मुझे पूरा यकीन है कि यह वही है।

क्या आप एक विशेष स्थिति का सामना कर रहे हैं जिसमें position: absoluteएक व्यवहार्य समाधान नहीं है?

Comments

position: absoluteस्क्रॉलिंग पर

— पुनरावृत्ति का

यह जवाब नहीं है जो एक उपयोगकर्ता को उम्मीद है कि यहां आने पर शीर्षक "प्रवाह से निकालें" पढ़ता है। display: noneन केवल प्रवाह से तत्व को पूरी तरह से हटा देता है।

— jstice4all

Answer 2

एक तरकीब जो position:absoluteमेरे लिए और अधिक स्वादिष्ट होती है, वह है अपने माता-पिता को बनाना position:relative। तब बच्चा माता-पिता की स्थिति के सापेक्ष 'निरपेक्ष' होगा।

jsFiddle

Answer 3

एक अन्य विकल्प height: 0; overflow: visible;एक तत्व को सेट करना है, हालांकि यह वास्तव में प्रवाह के बाहर नहीं होगा और इसलिए मार्जिन के ढहने को तोड़ सकता है ।

Comments

@ जेसिका, ::beforeपृष्ठभूमि का अनुकरण करने के लिए पूर्ण स्थिति के साथ छद्म तत्व का उपयोग करें ।

— उपयोगकर्ता

Answer 4

वहाँ है display: none, लेकिन मुझे लगता है कि आप क्या देख रहे हैं की तुलना में थोड़ा अधिक हो सकता है।

Comments

लेकिन फिर भी, यह अभी भी "पड़ोस में" है .. शरीर के सापेक्ष पूर्ण स्थिति यह स्थिति पर पूर्ण नियंत्रण रखने का एकमात्र तरीका है। ध्यान रखें कि यदि यह माता-पिता को रिश्तेदार के रूप में घोषित किया गया है, तो यह पूर्ण उत्पत्ति के सापेक्ष है - आपको तत्व को उस स्थिति में document.body या गैर-सापेक्ष घोषित तत्व के साथ जोड़ना होगा।

— दान हेबर्डन

क्या? यदि तत्व भी प्रदर्शित नहीं किया गया है तो स्थिति प्रासंगिक नहीं है ।

— ग्रेग हेविगिल

फ़ायरफ़ॉक्स में, display: noneनिरर्थक स्थान (स्क्रीन के शीर्ष पर, टैब को कवर करते हुए) में इनपुट के लिए सत्यापन संदेश दिखाई देते हैं। ऐसा लगता है कि कम से कम तत्व वास्तव में स्थितिहीन हैं, कम से कम उस ब्राउज़र में।

— ब्रिलियनड

Answer 5

position: fixed;जैसा कि आप कहते हैं, प्रवाह से एक तत्व को "पॉप" करेगा। :)

position: absoluteएक स्थिति के साथ होना चाहिए। जैसेtop: 1rem; left: 1rem

position: fixedहालाँकि, वह तत्व रखेगा जहाँ वह सामान्य रूप से दस्तावेज़ प्रवाह के अनुसार दिखाई देगा, लेकिन उसके बाद उसे जाने से रोकें। यह प्रभावी रूप से 0px (ऊंचाई के संबंध में डोम के साथ) को सेट करता है ताकि अगला तत्व उसके ऊपर शिफ्ट हो जाए।

यह बहुत अच्छा हो सकता है, क्योंकि आप सेट कर सकते हैं position: fixed; z-index: 1(या जो भी z- इंडेक्स आपको चाहिए) ताकि यह अगले तत्व पर "पॉप" हो।

यह विशेष रूप से स्थिर स्थिति हेडर के लिए उपयोगी है जो जब आप स्क्रॉल करते हैं तो शीर्ष पर रहते हैं, उदाहरण के लिए।

Answer 6

इसे फ्लोट करने से प्रवाह लेकिन स्थिति का पुनर्गठन होगा: पूर्ण रूप से इसे दस्तावेज़ के प्रवाह से पूरी तरह से हटाने का एकमात्र तरीका है।

Answer 7

मुझे पता है कि यह सवाल कई साल पुराना है, लेकिन मुझे लगता है कि आप जो करने की कोशिश कर रहे हैं वह ऐसा है जहां एक बड़ा तत्व है, जैसे कि एक छवि एक div की ऊंचाई के साथ हस्तक्षेप नहीं करती है?

मैं बस कुछ इसी तरह भाग गया, जहां मैं एक छवि को एक अतिप्रवाह के लिए चाहता था, लेकिन मैं चाहता था कि यह पाठ के एक स्ट्रिंग के अंत में हो, इसलिए मुझे नहीं पता था कि यह कहां समाप्त होगा।

एक उपाय जो मुझे लगा कि वह मार्जिन-बॉटम: -मेंमेंट की ऊंचाई है, इसलिए यदि इमेज 20px हाईट है,

margin-bottom: -20px; vertical-align: top;

उदाहरण के लिए।

इस तरह यह div के बाहर पर तैरता है, और स्ट्रिंग में अंतिम शब्द के बगल में रहता है।

Answer 8

संपूर्णता के लिए: floatसंपत्ति HTML के प्रवाह से एक तत्व को भी हटा देती है, जैसे

float: right

Answer 9

इसका उपयोग करने का प्रयास करें:

position: relative;
clear: both;

मैं इसका उपयोग तब करता हूं जब मैं पूर्ण स्थिति का उपयोग नहीं कर सकता, उदाहरण के लिए मुद्रण में जब आप page-break-after: always;केवल ठीक काम करते हैं position:relative।