অবস্থান নিখুঁত তবে পিতামাতার সাথে আপেক্ষিক

Question

আমার অন্য ডিভের ভিতরে দুটি ডিভ রয়েছে, এবং আমি সিএসএস ব্যবহার করে পিতা-মাতার ডিভের উপরের ডানদিকে একটি সন্তানের ডিভ এবং অন্য শিশু ডিভকে পিতামাতার ডিভের নীচে অবস্থিত করতে চাই। উদাহরণস্বরূপ, আমি দুটি সন্তানের ডিভের সাথে নিখুঁত অবস্থান ব্যবহার করতে চাই, তবে পৃষ্ঠার পরিবর্তে তাদের পিতামাতার সাথে সম্পর্কিত করুন। কিভাবে আমি এটি করতে পারব?

নমুনা এইচটিএমএল:

<div id="father">
   <div id="son1"></div>
   <div id="son2"></div>
</div>

Comments

আপনি চান পুত্রটি পিতার উপরের ডানদিকে থাকবে তবে নীচে কোথায় থাকবে 2? নীচে বাম, ডান, বা কেন্দ্র?

— j08691

এই ক্ষেত্রে, আপনাকে অবস্থান নির্ধারণ করতে হবে: পিতামাত্ত উপাদানগুলির সাথে সম্পর্কিত এবং অবস্থান: বাচ্চাদের উপাদানগুলির সাথে নিখুঁত। প্রথম সন্তানের উপাদানের উপর, আপনি প্যারেন্ট উপাদানটির উপরের ডানদিকে এটি স্থাপন করতে শীর্ষ: 0 এবং ডান: 0 রেখে দিতে হবে। দ্বিতীয় সন্তানের উপর, আপনার পিতামাতার উপাদানটির নীচে অবস্থিত করতে নীচে: 0 টি রাখা উচিত। এখানে একটি দুর্দান্ত নিবন্ধ রয়েছে kolosek.com/css-position-relative-vs-position-absolve আপেক্ষিক এবং পরম অবস্থানের বিশদ বিবরণ দিয়ে।

— নেশা জোরিক

Answer 1

#father {
   position: relative;
}

#son1 {
   position: absolute;
   top: 0;
}

#son2 {
   position: absolute;
   bottom: 0;
}

এর কারণ হল কাজ position: absoluteমানে ভালো কিছু "ব্যবহার top, right, bottom, leftনিজেকে নিকটতম পূর্বপুরুষ কার আছে সম্পর্ক স্থাপনের জন্য position: absoluteবা position: relative।"

সুতরাং আমরা তৈরি #fatherকরেছি position: relative, এবং বাচ্চাদের রয়েছে position: absolute, তারপরে বাচ্চাদের ব্যবহার topএবং bottomঅবস্থানের জন্য।

Comments

কেন #father { position: relative; }প্রয়োজন?

— জোশিরিজোনস

যারা তাঁর অভ্যন্তরে আছেন তাদের জন্য "অবস্থানের নিয়ম" পরিবর্তন করা দরকার।

— ব্লেশডো

@ mathguy54 বৈশিষ্ট বলেছেন পরিপূর্ণভাবে পজিশন করা বিষয়গুলি প্রথম আপেক্ষিক স্থান করতে থাকার কারণে স্থান পিতা বা মাতা, যা কোনো পিতা বা মাতা যে একটি অবস্থান মান নেই মানে static।

— অ্যালেক্স ডাব্লু

এ জাতীয় দৃশ্যের কী আছে: পিতা আপেক্ষিক এবং এর উচ্চতা 100% কিভাবে পুত্র এবং পুত্রকে পজিশনে রাখবেন, আসুন বলি যথাক্রমে তেহ পিতার উচ্চতার 20% এবং 70%?

— রোসিটেন

@ ব্রুসসুন

— অ্যালেক্স ডব্লিউ

Answer 2

div#father {
    position: relative;
}
div#son1 {
    position: absolute;
    /* put your coords here */
}
div#son2 {
    position: absolute;
    /* put your coords here */
}

Comments

আপনার যদি সন্তানের সাথে পিতামাতার আকার পরিবর্তন করতে হবে?

— ফ্রেনকিবি

Answer 3

যদি কেউ সরাসরি কোনও পিতামাতার অধীনে কোনও শিশু ডিভ পোস্ট করতে চায় ase

#father {
   position: relative;
}

#son1 {
   position: absolute;
   top: 100%;
}

ওয়ার্কিং ডেমো কোডেপেন

Answer 4

আপনি যদি পিতামাতাকে কোনও অবস্থান না দেন তবে ডিফল্টরূপে এটি লাগে static। আপনি যদি এই পার্থক্যটি বুঝতে চান তবে এই উদাহরণটি দেখুন

উদাহরণ 1 ::

http://jsfiddle.net/Cr9KB/1/

   #mainall
{

    background-color:red;
    height:150px;
    overflow:scroll
}

এখানে প্যারেন্ট ক্লাসের কোনও অবস্থান নেই সুতরাং উপাদানটি বডি অনুসারে স্থাপন করা হয়।

উদাহরণ 2 ::

http://jsfiddle.net/Cr9KB/2/

#mainall
{
    position:relative;
    background-color:red;
    height:150px;
    overflow:scroll
}

এই উদাহরণে পিতামাতার আপেক্ষিক অবস্থান থাকে তাই উপাদানটি আপেক্ষিক পিতামাতার মধ্যে স্থিত হয়।

Comments

এবং, যদি আপনার # মেইনল {উচ্চতা: 150px} না থাকে তবে কী হবে? মানে, মেইনলে যদি গতিশীল উচ্চতা থাকে?

— অ্যালবার্ট

তারপরে আপনার ভাসমান উপাদানটি পৃষ্ঠা (এবং সিএসএস) লোড করার সময় পিতামাতার উপাদানটির অবস্থানের সাথে আপেক্ষিক হবে। আপনি যদি পৃষ্ঠাটি লোডের পরে আপডেট করতে চান তবে জাভাস্ক্রিপ্ট ব্যবহার করুন - ক্লায়েন্টএক্স এবং ক্লায়েন্টওয়াই শুরু করার জন্য ভাল জায়গা

— আব্রাহাম ব্রুকস