নথি প্রবাহে স্থান না নিয়ে কোনও উপাদানকে তুলনামূলকভাবে অবস্থান করুন

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 হয়, পরস্পর

— অ্যালেক্স এইচ

@ অ্যালেক্স এইচ দুর্ভাগ্যক্রমে, এই পদ্ধতিটি এটি করার কোনও উপায় সরবরাহ করে না। আমি এই ক্ষেত্রে ফ্রেডকের নেতিবাচক অবস্থান / নেতিবাচক-মার্জিন পদ্ধতিতে চেষ্টা করার পরামর্শ দেব ise

— নাইটফায়ার কেট

Answer 2

আপনি যে পিক্সেল সরিয়েছেন তার সমান একটি মার্জিন যুক্ত করুন:

উদাহরণ

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

Comments

কোনভাবেই আমার কাছে অন্য উত্তরগুলির চেয়ে আরও বেশি

— অর্থবোধ করে

এটা কি কাজ করে? আমি এটি ক্রোমে চেষ্টা করছি এবং দেখে মনে হচ্ছে এটি কাজ করে না। আমি স্লাইডসগুলি থেকে নেভিগেশন বোতামগুলি স্থিত করতে এটি ব্যবহার করছি, যাতে এটির সাথেও গোলমাল হতে পারে।

— পেট্রুজা

আমি left: -25px; margin-right: -25px;এটি দিয়ে চেষ্টা করেছি এবং এটি এখনও কোনও কারণে ভাইবাল উপাদানগুলি আনুভূমিকভাবে 2-3 পিক্সেল দ্বারা অফসেট করে।

— মাইক

float:right;আপনি যখন এইটিকে পর্দার ডান পাশের সাথে তুলনামূলকভাবে তৈরি করতে চান তখন এর ব্যবহারটি অন্তর্ভুক্ত করুন যাতে ডান বা বামের মান ছোট এবং আরও পরিচালিত হতে পারে।

— দামিয়ান গ্রীন

ইতিবাচক top:মূল্যবোধের জন্য মনে margin-bottom:রাখবেন আপনার স্থানচ্যুতি নয় বরং মৌলের উচ্চতার

— বিয়োগের

Answer 3

কিছুটা পড়া থেকে, মনে হয় আপনি যতক্ষণ না পিতামণ্ডলকে তুলনামূলকভাবে স্থিতিশীল রেখে কোনও উপাদানকে নিখুঁতভাবে অবস্থান করতে পারেন। এর অর্থ যদি আপনার সিএসএস থাকে:

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

তারপরে শিশু উপাদান দস্তাবেজের প্রবাহে মোটেও কোনও স্থান গ্রহণ করবে না। তারপরে আপনি "বাম", "নীচে", ইত্যাদি বৈশিষ্ট্যগুলির মধ্যে একটি ব্যবহার করে এটিকে অবস্থান করতে পারেন। পিতামাতার উপর আপেক্ষিক অবস্থান সাধারণত এটি প্রভাবিত করা উচিত নয় কারণ এটি যদি আপনি "বাম", "নীচে", ইত্যাদি নির্দিষ্ট না করেন তবে এটি ডিফল্টরূপে এটির মূল অবস্থানে স্থাপন করা হবে it

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

Answer 4

আপনি কেবলমাত্র সে উপাদানটি দস্তাবেজের প্রবাহকে সেট করে সরিয়ে নিয়ে যান এবং স্ট্রিংয়ের বৈশিষ্ট্যগুলি নির্দিষ্ট position: absoluteকরে না দিয়ে বিষয়বস্তুর গতিশীল প্রবাহের সাথে অবাধ বিভ্রান্তিকর প্রস্থানটি ছেড়ে যান যা প্রবাহের আপেক্ষিক শেষ পয়েন্টটি গতিশীলভাবে ব্যবহার করতে বাধ্য করবে। এই জায়গাটি গ্রহণ থেকে নিজেকে সরানোর সময় একেবারে অবস্থানযুক্ত উপাদান নথির প্রবাহকে অনুসরণ করবে।left top rightbottom

কোনও ডামি মোড়কের দরকার নেই।

Comments

একটি সাধারণ উদাহরণ কোড পুরো প্যারাগ্রাহটি পড়ার এবং বোঝার পরিবর্তে আরও অনেক বেশি সহায়তা করতে পারে। ধারণাটি ধারণাটি পরিষ্কার

— এমআরএএমডিএডিভি

Answer 5

আমার জন্য প্রদত্ত সমাধানগুলি কার্যকর হয়নি। আমি পাঠ্যের চেয়ে এইচ 3 দেখতে চাই এবং তার পরে বুটস্ট্র্যাপ-প্যানেলগুলি, এই প্যানেলগুলির সাথে উল্লম্ব-সমকালীন আমি ডানদিকে অন্য প্যানেল দেখতে চাই,

আমি এটি উচ্চতা: 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)