অ্যাঙ্কর পজিশনিং কেবল উত্স আদেশের বিষয়ে চিন্তা করবেন না

দশটি ডিভস একটি বারে হাঁটা:

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>

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

<div>1</div>
<div>2</div>
<div>10</div><!-- Sitting next to Div #2-->
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>

দশম ডিভের পাশের চেয়ে দ্বিতীয় ডিভের কোলে বসতে হবে। সুতরাং, সম্ভবত আমরা তাদের মধ্যে সম্পর্কটিকে নতুন করে সংজ্ঞায়িত করি এবং এটিকে একটি পিতা-সন্তানের বাছাইয়ের জিনিস হিসাবে তৈরি করি।

<div>1</div>
<div class="parent">
  2
  <div class="child">10</div><!-- Sitting in Div #2's lap-->
</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>

সিএসএসে দ্বিতীয় ডিভের মধ্যে দশম ডিভের মধ্যে আমরা এখন কিছুটা জটিল পজিশনিং ডান্স করতে পারি:

.parent {
  position: relative; /* Contains Div #10 */
}

.child {
  position: absolute;
}

আমরা সন্তানের অবস্থান ইনসেট করতে পারি যাতে এটি পিতামাতার শীর্ষ-বাম প্রান্তে পিন করা হয়:

.child {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
}

এবং আমরা সন্তানের প্রস্থকে পিতামাতার আকারে 100% এ সেট করতে পারি যাতে এটি সম্পূর্ণরূপে পিতামাতার কোলে covering েকে রাখে এবং এটি সম্পূর্ণরূপে অস্পষ্ট করে তোলে।

.child {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 100%;
}

শীতল, এটা কাজ!

অ্যাঙ্কর পজিশনিং এই প্রক্রিয়াটিকে একটি হেকুভা লটকে সহজতর করে কারণ এটি কেবল দশম ডিভটি এইচটিএমএলে রয়েছে সেদিকে খেয়াল রাখে না। পরিবর্তে, আমরা 10 ইনযুক্ত আমাদের প্রাথমিক মার্কআপের সাথে কাজ করতে পারিডিভতারা বারে প্রবেশের সাথে সাথে ঠিক আইডুয়ালগুলি। আপনি ক্রোমের সর্বশেষতম সংস্করণে অনুসরণ করতে চান যেহেতু অ্যাঙ্কর পজিশনিং কেবল সেখানে আমি এটি লেখার সময় ডিফল্টরূপে সমর্থিত।

<div>1</div>
<div class="parent">2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div class="child">10</div>

পরিবর্তে, আমরা একটি হিসাবে দ্বিতীয় ডিভটি সংজ্ঞায়িত করি অ্যাঙ্কর উপাদান ব্যবহার করে উপাদান anchor-name সম্পত্তি। আমি ব্যবহার চালিয়ে যাচ্ছি .parent এবং .child জিনিস পরিষ্কার রাখতে ক্লাস।

.parent {
  anchor-name: --anchor; /* this can be any name formatted as a dashed ident */
}

তারপরে আমরা শিশুটিকে পিতামাতার সাথে সংযুক্ত করি position-anchor সম্পত্তি:

.child {
  position-anchor: --anchor; /* has to match the `anchor-name` */
}

আমাদের শেষ কাজটি হ’ল শিশুটিকে অবস্থান করতে হবে যাতে এটি পিতামাতার কোলে covers েকে রাখে। আমরা আছে position-area সম্পত্তি যা আমাদের পিতামাতার উপর উপাদানটি কেন্দ্র করতে দেয়:

.child {
  position-anchor: --anchor;
  position-area: center;
}

আমরা যদি পিতামাতার কোলে পুরোপুরি cover াকতে চাই তবে আমরা সন্তানের আকারটি ব্যবহার করে পিতামাতার সাথে মেলে সেট করতে পারি anchor-size() ফাংশন:

.child {
  position-anchor: --anchor;
  position-area: center;
  width: anchor-size(width);
}

কোনও পাঞ্চলাইন নেই – এমন একটি জিনিস যা অ্যাঙ্করকে এমন কিছু করে তোলে যা সম্পর্কে আমি খুব উত্তেজিত। এটি এইচটিএমএল উত্সের আদেশটি এতটা সিএসএস-ওয়াই করে দেয় কারণ এটি বিষয়বস্তু এবং উপস্থাপনার মধ্যে উদ্বেগের আরও একটি বিচ্ছেদ।