सापेक्ष रूप से एक तत्व को दस्तावेज प्रवाह में जगह लेने के बिना स्थिति

Question

मैं एक तत्व को अपेक्षाकृत कैसे स्थिति में रख सकता हूं, और क्या यह दस्तावेज़ प्रवाह में जगह नहीं लेता है?

Comments

क्या यह अपेक्षाकृत स्थिति में होना चाहिए? दस्तावेज़ प्रवाह से बिल्कुल तैनात तत्व हटा दिए जाते हैं।

— जेसन जेनारो

Answer 1

क्या आप पूर्ण स्थिति की तरह लग रहा है करने की कोशिश कर रहे हैं। दूसरी ओर, आप, हालांकि, शून्य-चौड़ाई, शून्य-ऊंचाई, अपेक्षाकृत तैनात तत्व का निर्माण करके एक छद्म-सापेक्ष तत्व बना सकते हैं, अनिवार्य रूप से स्थिति के लिए एक संदर्भ बिंदु बनाने के उद्देश्य से, और एक पूरी तरह से तैनात तत्व उस के भीतर:

<div style="position: relative; width: 0; height: 0">
    <div style="position: absolute; left: 100px; top: 100px">
        Hi there, I'm 100px offset from where I ought to be, from the top and left.
    </div>
</div>

Comments

आप इस मामले में चौड़ाई कैसे प्राप्त करेंगे? चूंकि सापेक्ष डिव चौड़ाई 0 है, अतः पूर्ण डिब्बी चौड़ाई को ठीक से प्राप्त करने में सक्षम नहीं होगी यदि वे दोनों एक कंटेनर में हों

— एलेक्स एच

@AlexH दुर्भाग्य से, यह विधि ऐसा करने का एक तरीका प्रदान नहीं करती है। मैं इस मामले में फ्रेड की नकारात्मक-स्थिति / नकारात्मक-मार्जिन विधि का प्रयास करने की सलाह दूंगा।

— रात

Answer 2

आपके द्वारा चलाए गए पिक्सेल के बराबर मार्जिन जोड़ें:

उदाहरण

.box {
    position: relative;
    top: -30px; 
    margin-bottom: -30px;
}

Comments

किसी भी तरह से मुझे दूसरे जवाब की तुलना में अधिक समझ में आता है

— markasoftware

क्या यह काम करता है? मैं इसे क्रोम में आज़मा रहा हूँ और काम नहीं कर रहा हूँ। मैं इसे Slidejs से नेविगेशन बटन की स्थिति के लिए उपयोग कर रहा हूं, ताकि इसके साथ भी गड़बड़ हो सके।

— पेट्रूजा

मैंने इसके साथ कोशिश की left: -25px; margin-right: -25px;और यह अभी भी किसी कारण से 2-3 पिक्सेल द्वारा क्षैतिज रूप से सिबलिंग तत्वों को ऑफ़सेट करता है।

— माइक

float:right;जब आप इस रिश्तेदार को स्क्रीन के दाईं ओर बनाना चाहते हैं, तो उसका उपयोग शामिल करें ताकि दाएं या बाएं के मान छोटे और अधिक प्रबंधनीय हो सकें।

— डेमियन ग्रीन

सकारात्मक top:मूल्यों के लिए ध्यान रखें margin-bottom:कि आपको तत्व ऊंचाई के शून्य से विस्थापन के बराबर होना चाहिए

— श्री हीलिस

Answer 3

थोड़ा पढ़ने से, ऐसा लगता है कि आप किसी तत्व को तब तक पूर्ण स्थिति में रख सकते हैं जब तक कि मूल तत्व अपेक्षाकृत स्थिति में न हो। इसका मतलब है कि अगर आपके पास सीएसएस है:

.parent { 
    position: relative; 
}
.parent > .child {
    position: absolute;
}

तब बाल तत्व दस्तावेज़ प्रवाह में बिल्कुल भी जगह नहीं लेगा। उसके बाद आप "लेफ्ट", "बॉटम", आदि गुणों में से एक का उपयोग करके इसे स्थिति में ला सकते हैं। माता-पिता पर सापेक्ष स्थिति आमतौर पर इसे प्रभावित नहीं करना चाहिए क्योंकि यह मूल स्थिति में डिफ़ॉल्ट रूप से स्थित होगा यदि आप "बाएं", "नीचे", आदि को निर्दिष्ट नहीं करते हैं।

http://css-tricks.com/absolute-positioning-inside-relative-positioning/

Answer 4

आप बस सेटिंग से दस्तावेज़ प्रवाह बंद उस तत्व ले position: absolute, और द्वारा सामग्री के गतिशील प्रवाह के साथ स्वतंत्र रूप से छोड़ यह तोड़ने बिंदु कदम नहीं निर्दिष्ट करने left top rightऔरbottom शैली के गुणों को हैं जो गतिशील प्रवाह के सापेक्ष समापन बिंदु का उपयोग करने के लिए मजबूर करेंगे। इस तरह से पूरी तरह से मौजूद तत्व डॉक्यूमेंट के फ्लो को फॉलो करते हुए स्पेस लेने से दूर करेगा।

किसी डमी रैपर की जरूरत नहीं है।

Comments

एक साधारण एग्जम्पल कोड पूरे परगना को पढ़ने और समझने के बजाय बहुत अधिक मदद कर सकता है।

— सोचा

Answer 5

मेरे लिए दिए गए समाधानों ने ठीक काम नहीं किया। मैं एक h3 देखना चाहता हूं, पाठ से और उसके बाद बूटस्ट्रैप-पैनल, इस पैनल के वर्टिकल-सिंक्रोनस मैं दाईं ओर अन्य पैनल देखना चाहता हूं

मैंने इसे ऊंचाई के साथ प्रबंधित किया: 0 आवरण और उस स्थिति के बाद: रिश्तेदार; बायां: 100%।

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">

    <div class="row">
        <div class="col-md-9">
            <div class="col-md-12">
                <h3> hello </h3>
            </div>
            <div class="col-md-12">
                <span> whats up? </span>
            </div>
            <div style="height:0" class="col-md-12">
                <div style="left:100%" class="col-md-3">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h3 class="panel-title">Panel title</h3>
                        </div>
                        <div class="panel-body">
                            <p>Panel Body</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-12">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">Panel title</h3>
                    </div>
                    <div class="panel-body">
                        <p>Panel Body</p>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">Panel2 title</h3>
                    </div>
                    <div class="panel-body">
                        <p>Panel Body</p>
                    </div>
                </div>
            </div>

        </div>
        <div class="col-md-3">
            <!--placeholder-->
        </div>

    </div>
</div>

Answer 6

@ बेकीम बकाज के पास मेरे लिए सही जवाब था, भले ही यह ओपी के लिए ठीक वैसा न हो (हालांकि उनका सवाल व्याख्या के लिए छोड़ दिया गया था)। कहा जा रहा है, बेकिम ने एक उदाहरण नहीं दिया।

<h1>Beneath this...</h1>
<style>
    .HoverRight {
        background: yellow;
        position: absolute;
        right: 0;
    }
</style>
<div class="HoverRight">Stuff and Things!</div>
<p>but, top = same as this paragraph.</p>

ऊपर दिया गया उदाहरण एक तत्व सेट करता है ...

• शुद्ध और सरल सीएसएस का उपयोग करता है और कुछ नहीं
• यह ऊर्ध्वाधर रूप में स्थित है जैसे कि यह प्रवाह (डिफ़ॉल्ट में) था top सेटिंग)
• पृष्ठ के दाहिने किनारे पर क्षैतिज रूप से स्थित है (right: 0 )
• कोई स्थान नहीं लेता है, फिर भी पृष्ठ स्क्रॉल के रूप में स्वाभाविक रूप से आगे बढ़ेगा ( position: absolute)