এর ধারকটির সাথে সম্পর্কিত কোনও উপাদান স্থাপন করুন

Question

আমি এইচটিএমএল এবং সিএসএস ব্যবহার করে একটি অনুভূমিক 100% স্ট্যাকড বার গ্রাফ তৈরি করার চেষ্টা করছি। আমি যে DIVsমানগুলি গ্রাফ করতে চাই তার উপর নির্ভর করে ব্যাকগ্রাউন্ড রঙ এবং শতাংশ প্রস্থের সাহায্যে বারগুলি তৈরি করতে চাই । আমি গ্রাফের সাথে একটি স্বেচ্ছাসেবী অবস্থান চিহ্নিত করতে একটি গ্রিড লাইনও রাখতে চাই।

আমার পরীক্ষায়, আমি ইতিমধ্যে সিএসএস সম্পত্তি অর্পণ করে অনুভূমিকভাবে স্ট্যাক করার জন্য বারগুলি পেয়েছি float: left। যাইহোক, আমি এটি এড়াতে চাই, কারণ এটি বিভ্রান্তিকর উপায়ে লেআউটটির সাথে সত্যিই গোলমাল মনে হচ্ছে। এছাড়াও, বারগুলি ভাসমান অবস্থায় গ্রিড লাইনগুলি খুব ভাল কাজ করবে বলে মনে হয় না।

আমি মনে করি যে সিএসএস পজিশনিং এটি পরিচালনা করতে সক্ষম হওয়া উচিত তবে এটি কীভাবে করা যায় তা আমি এখনও জানি না। আমি তাদের ধারকটির উপরের-বাম কোণের সাথে সম্পর্কিত কয়েকটি উপাদানগুলির অবস্থান নির্দিষ্ট করতে সক্ষম হতে চাই। আমি নিয়মিত এই ধরণের ইস্যুতে চালিত করি (এমনকি এই নির্দিষ্ট গ্রাফ প্রকল্পের বাইরেও), তাই আমি এমন একটি পদ্ধতি চাই যা:

1. ক্রস ব্রাউজার (আদর্শভাবে অনেকগুলি ব্রাউজার হ্যাক ছাড়াই)
2. কুইর্কস মোডে চলে
3. অনুকূলিতকরণের সুবিধার্থে যতটা সম্ভব পরিষ্কার / পরিষ্কার
4. সম্ভব হলে জাভাস্ক্রিপ্ট ছাড়া সম্পন্ন করুন।

Comments

আপনি কি এটি এইচটিএমএল করতে হবে? আপনি কি পরিবর্তে গুগল চার্ট ব্যবহার করতে পারেন? কোড.google.com/apis/chart/#bar_charts

— স্যাম হাসলার

Answer 1

আপনারা ঠিক বলেছেন যে সিএসএস পজিশনিংয়ের উপায় the এখানে দ্রুত চালিয়ে যাওয়া:

position: relativeনিজের সাথে সম্পর্কিত একটি উপাদান বিন্যাস করবে । অন্য কথায়, উপাদানগুলি সাধারণ প্রবাহে বিভক্ত হয়, তারপরে এটি স্বাভাবিক প্রবাহ থেকে সরানো হয় এবং আপনি যে মানগুলি নির্দিষ্ট করেছেন (উপরে, ডান, নীচে, বাম) দ্বারা অফসেট করা হয়। এটি লক্ষ করা গুরুত্বপূর্ণ যে এটি প্রবাহ থেকে সরানো হয়েছে, তার চারপাশের অন্যান্য উপাদানগুলি এটির সাথে স্থানান্তরিত করবে না (যদি আপনি এই আচরণটি চান তবে তার পরিবর্তে নেতিবাচক মার্জিন ব্যবহার করুন)।

তবে, আপনি সম্ভবত আগ্রহী position: absoluteযেটি কোনও ধারকটির সাথে সম্পর্কিত কোনও উপাদান স্থাপন করবে position ডিফল্টরূপে, ধারকটি হ'ল ব্রাউজার উইন্ডো, তবে যদি কোনও পিতামণ্ডল উপাদান থাকে position: relativeবা position: absoluteএটি সেট করে থাকে, তবে এটি তার বাচ্চাদের অবস্থান স্থানাঙ্কের জন্য পিতামাতার ভূমিকা পালন করবে।

প্রদর্শন করার জন্যে:

#container {
  position: relative;
  border: 1px solid red;
  height: 100px;
}

#box {
  position: absolute;
  top: 50px;
  left: 20px;
}

<div id="container">
  <div id="box">absolute</div>
</div>

উদাহরণস্বরূপ, উপরের বাম কোণটি #box100px ডাউন এবং উপরে বাম কোণার 50px বামে হবে #container। যদি সেট #containerনা করে থাকে position: relativeতবে এর স্থানাঙ্কগুলি #boxব্রাউজার ভিউ পোর্টের উপরের বাম কোণের সাথে সম্পর্কিত।

Comments

এই পৃষ্ঠাটি এই ঘটনার দুর্দান্ত চিত্র দেখায়: css-tricks.com/absolve-positioning-inside-relative-positioning

— DarenW

Answer 2

আপনাকে সন্তানের ধারকটির অবস্থানের পাশাপাশি পিতামাতার ধারকের অবস্থান স্পষ্টভাবে সেট করতে হবে। এটি করার সাধারণ উপায় হ'ল কিছু:

div.parent{
    position: relative;
    left: 0px;  /* stick it wherever it was positioned by default */
    top: 0px;
}

div.child{
    position: absolute;
    left: 10px;
    top: 10px;
}

Comments

তুলনামূলকভাবে অবস্থানযুক্ত উপাদানগুলির শূন্য হলে আপনার শীর্ষ বা বাম সম্পত্তি মান সরবরাহ করার দরকার নেই।

— জিম

বিদ্যমান ব্রাউজারগুলির জন্য সত্য তবে স্পেসিফিকেশনে সংজ্ঞায়িত হয়নি।

— স্টিফেন ডেকেন

এটি অবশ্যই স্পেসিফিকেশন সংজ্ঞায়িত করা হয়। বিভাগ 9.4.3 পড়ুন এবং বৈশিষ্ট্যের জন্য প্রাথমিক মানগুলি পরীক্ষা করুন।

— জিম

9.4.3 বলছে যে বাম এবং শীর্ষের জন্য প্রাথমিক মানগুলি হ'ল 'অটো'। 'অটো' মানগুলির সাথে কী ঘটে তার সংজ্ঞাটি একরকম সংশ্লেষিত এবং আমি এগুলি কখনই পুরোপুরি বুঝতে সক্ষম হইনি। যদিও আপনারা যদি বলেন যে এটি শূন্য হয়ে গেছে, তবে আমি এটির জন্য আপনার শব্দটি গ্রহণ করব।

— স্টিফেন ডেকেন

Answer 3

আমি জানি আমি দেরি করেছি তবে আশা করি এটি সাহায্য করবে।

অবস্থানের সম্পত্তিটির জন্য নিম্নলিখিত মানগুলি দেওয়া হচ্ছে।

• স্থির
• সংশোধন করা হয়েছে
• আপেক্ষিক
• পরম

অবস্থান: অচল

এটি ডিফল্ট। এর অর্থ উপাদানটি এমন একটি অবস্থানে আসবে যা এটি সাধারণত করে ly

#myelem {
    position : static;
}

অবস্থান: স্থির

এটি ব্রাউজার উইন্ডো (ভিউপোর্ট) এর সাথে সম্মানের সাথে একটি উপাদানের অবস্থান নির্ধারণ করবে। পৃষ্ঠার স্ক্রোলগুলি সত্ত্বেও একটি স্থিত অবস্থানযুক্ত উপাদান তার অবস্থানে থাকবে।

(আপনি যদি পৃষ্ঠার নীচে ডান কোণায় স্ক্রোল থেকে টপ টপ বোতাম চান তবে আদর্শ)।

#myelem {
    position : fixed;
    bottom : 30px;
    right : 30px;
}

অবস্থান: আপেক্ষিক

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

#myelem {
    position : relative;
    left : 30px;
    top : 30px;
}

উপরের সিএসএসটি # মাইলেম উপাদানটি 30px বাম দিকে এবং 30px এর আসল অবস্থানের শীর্ষে স্থানান্তরিত করবে।

অবস্থান: পরম

আমরা যদি চাই যে কোনও উপাদানটি পৃষ্ঠায় একটি সঠিক অবস্থানে রাখা হোক।

#myelem {
    position : absolute;
    top : 30px;
    left : 300px;
}

উপরের সিএসএস পৃষ্ঠায় উপরের থেকে 30px এবং বাম থেকে 300px পজিশনে # মাইলেম উপাদানকে অবস্থান করবে এবং এটি পৃষ্ঠাটি দিয়ে স্ক্রোল করবে।

এবং পরিশেষে...

অবস্থান আপেক্ষিক + পরম

আমরা কোনও পিতামাতার উপাদানের অবস্থানের সম্পত্তিটিকে আপেক্ষিক স্থানে সেট করতে পারি এবং তারপরে সন্তানের উপাদানটির অবস্থান সম্পত্তিটিকে পরম স্থানে সেট করতে পারি । এইভাবে আমরা সন্তানের পিতামাতার তুলনায় নিখুঁত অবস্থানে রাখতে পারি।

#container {
    position : relative;
}

#div-2 {
    position : absolute;
    top : 0;
    right : 0;
}

আমরা উপরের ছবিতে দেখতে পারি # ডিভ -2 উপাদানটি # কনটেনার উপাদানটির উপরের ডানদিকে কোণায় অবস্থিত ।

GitHub: আপনি উপরের ছবিতে HTML টি জানতে পারেন এখানে এবং CSS এখানে ।

আশা করি এই টিউটোরিয়ালটি সাহায্য করবে।

Answer 4

নিখুঁত অবস্থানের অবস্থান এটির নিকটস্থ অবস্থান পূর্বসূরীর সাথে সম্পর্কিত একটি উপাদান। সুতরাং position: relativeধারকটি রাখুন, তারপরে শিশু উপাদানগুলির জন্য রাখুন topএবং leftযতক্ষণ শিশু উপাদান রয়েছে ততক্ষণ পাত্রে উপরের বামের সাথে সম্পর্কিত হবে position: absolute। আরও তথ্য সিএসএস 2.1 স্পেসিফিকেশন উপলব্ধ ।

Answer 5

আপনার যদি কোনও উপাদানটিকে যুক্ত উপাদানগুলির সাথে সম্পর্কিত করে তুলতে চান তবে position: relative আপনাকে প্রথমে ধারক উপাদানকে যুক্ত করতে হবে । সন্তানের যে উপাদানটি আপনি পিতামাতার তুলনায় তুলনামূলকভাবে তুলতে চান তা থাকতে হবে position: absolute । পরম পজিশনিংয়ের যে পদ্ধতিটি কাজ করে তা হ'ল এটি প্রথম তুলনামূলকভাবে (বা একেবারে) অবস্থানযুক্ত প্যারেন্ট উপাদানটির তুলনায় সম্পন্ন হয় । যদি সেখানে কোন অপেক্ষাকৃত স্থান পিতা বা মাতা, উপাদান আপেক্ষিক স্থান হবে মূল উপাদান (এইচটিএমএল উপাদানে সরাসরি)।

সুতরাং আপনি যদি সন্তানের উপাদানটিকে পিতামাতার ধারকের উপরের বাম দিকে রাখতে চান তবে আপনার এটি করা উচিত:

.parent {
  position: relative;
} 

.child {
  position: absolute;
  top: 0;
  left: 0;  
}

এই নিবন্ধটি পড়ে আপনি প্রচুর উপকৃত হবেন । আশাকরি এটা সাহায্য করবে!