css - পজিশনের সাথে এলিমেন্ট কেন: আঠালো পিতামাতার নীচে আটকে না?




css3 css-position (2)

আমি CSS "স্টিকি" কী করে তা বোঝার চেষ্টা করছি। আমি এটির পিতামাতার 'শীর্ষে' লেগে থাকতে পারি, তবে 'নীচে' থাকতে পারি না

আমার পরীক্ষার কোডটি হ'ল:

.block {
  background: pink;
  width: 50%;
  height: 200px;
}

.move {
  position: sticky;
  bottom: 0;
}
1111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>
<div class="block">
  AAAA
  <div class="move">
    BBBB
  </div>
</div>
222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>

যখন আমার "সরানো" সেট 'শীর্ষ: 0' এ থাকবে তবে এটি গোলাপী ব্লকের শীর্ষে স্থির থাকে তবে 'নীচে: 0' এ সেট করলে এটি আর স্থির / স্টিকি মনে হয় না।


এটি ঠিকঠাক কাজ করছে তবে আপনি কিছুই দেখতে পাবেন না। সংজ্ঞাটি একবার দেখে নেওয়া যাক:

একটি স্টিকিলি পজিশন উপাদান এমন একটি উপাদান যা গণিত অবস্থানের মানটি স্টিকি থাকে। এটি তার প্রবাহের মূলের (বা যে পাত্রে এটির ভিতরে স্ক্রোল করে) এর মধ্যে একটি নির্দিষ্ট চৌকো (যেমন অটো বাদে অন্য মানের শীর্ষ স্থাপন করে) অবধি অপেক্ষাকৃত অবস্থান হিসাবে গণ্য করা হয় , সেই স্থানে সভাটি না হওয়া পর্যন্ত এটি "আটকে" হিসাবে বিবেচিত হয় এটির ব্লক ref বিপরীত প্রান্ত

এটিকে স্ক্রিন থেকে আড়াল করতে ব্লক উপাদানকে একটি বড় মার্জিন দিন তারপর ধীরে ধীরে স্ক্রোলিং শুরু করুন rol

.block {
  background: pink;
  width: 50%;
  height: 200px;
  margin-top:120vh;
}

.move {
  position: sticky;
  bottom: 0;
}
<div class="block">
  AAAA
  <div class="move">
    BBBB
  </div>
</div>

আপনি লক্ষ্য করবেন যে আপনার উপাদানটি যখন দেখায় BBB এটির প্রথম স্থানে না পৌঁছা পর্যন্ত AAA ওভারল্যাপ করছে। bottom:0 ব্যবহার করার সময় এটি স্টিকি আচরণ। সুতরাং আমাদের উপাদানটি position:relative ধরে রাখা হয়েছে position:relative এবং যখন পাত্রটি উপরের পর্দা থেকে বাইরে যেতে শুরু করে, এটি বিপরীত প্রান্তে (ধারকটির শীর্ষে) না পৌঁছানো পর্যন্ত এটি তার নীচে স্থির হয়ে যায়।

ঠিক একই সাথে শীর্ষেও ঘটে top:0 তবে বিপরীত দিকে:

.block {
  background: pink;
  width: 50%;
  height: 200px;
  margin-bottom:120vh;
}

.move {
  position: sticky;
  top: 0;
}
<div class="block">
  AAAA
  <div class="move">
    BBBB
  </div>
</div>

সুতরাং স্টিকিটি উপাদানটিকে উপরের বা নীচে অবস্থিত করবে না তবে কন্টেইনারটি পর্দা থেকে অদৃশ্য হয়ে যাবে তখন উপাদানটি দৃশ্যমান হওয়ার জন্য কীভাবে আটকে থাকবে তা সিদ্ধান্ত নেবে।

আপনি যা চান তা পেতে আপনার অন্যান্য বৈশিষ্ট্যগুলি ব্যবহার করে নীচে আপনার উপাদানটি রাখা এবং এটি নীচে স্টিকি রাখা দরকার।

এখানে একটি উদাহরণ রয়েছে যেখানে আমি ফ্লেক্সবক্স ব্যবহার করে নীচে উপাদানটি রাখি এবং আমি উল্লেখ করি যে নীচে এটি স্টিকি হওয়া দরকার।

.block {
  background: pink;
  width: 50%;
  height: 200px;
  margin-top:120vh;
  display:flex;
  flex-direction:column;
}

.move {
  margin-top:auto;
  position: sticky;
  bottom: 0;
}
<div class="block">
  AAAA
  <div class="move">
    BBBB
  </div>
</div>

সুতরাং position:sticky কখনই উপাদানটির অবস্থান নির্ধারণ করতে পারে না যেমন আমরা absolute বা fixed তবে এটি সংজ্ঞায়িত করবে যে যখন কোনও স্ক্রোল আচরণ থাকবে তখন উপাদানটি কীভাবে আটকে থাকবে।

আরও বুঝতে আরও উদাহরণ এখানে:

.block {
  background: pink;
  display:inline-flex;
  vertical-align:top;
  height: 200px;
  max-width:100px;
  flex-direction:column;
  margin:100vh 0;
}

.e1 {
  position: sticky;
  top: 0;
}
.e2 {
  margin-top:auto;
  position: sticky;
  top: 0;
}
.e3 {
  position: sticky;
  top: 20px;
}
.e4 {
  position: sticky;
  bottom: 0;
  margin:auto;
}
.e5 {
  position: sticky;
  bottom: 0;
  top:0;
  margin:auto;
}
.e5 {
  position: sticky;
  bottom: 0;
}
<div class="block">
  <div class="e1">Top sticky</div>
</div>
<div class="block">
  <div class="e2">Top sticky at bottom (nothing will happen :( )</div>
</div>
<div class="block">
  <div class="e3">Top sticky at 10px</div>
</div>
<div class="block">
  <div class="e4">bottom sticky in the middle</div>
</div>
<div class="block">
  <div class="e5">top/bottom sticky in the middle</div>
</div>
<div class="block">
  <div class="e6">bottom sticky at the top (nothing will happen :( )</div>
</div>

স্টিকি সহ আর একটি সাধারণ ভুল হ'ল তুলনামূলকভাবে তার পিতামাতার একজনের তুলনায় উপাদানটির উচ্চতা / প্রস্থের কথা ভুলে যাওয়া। যদি উপাদানটির উচ্চতা পিতামাতার উচ্চতার সমান হয় (ব্লকযুক্ত থাকে) তবে যৌক্তিকভাবে কোনও স্টিকি আচরণ হবে না কারণ আমরা ইতিমধ্যে বিপরীত প্রান্তে আছি।

.block {
  background: pink;
  display:inline-flex;
  vertical-align:top;
  height: 200px;
  max-width:100px;
  flex-direction:column;
  margin:100vh 0;
}

.block > div {
  border:2px solid;
} 
.e1 {
  position: sticky;
  top: 0;
}
<div class="block">
  <div class="e1">Top sticky</div>
</div>
<div class="block">
  <div class="e1" style="height:100%">I will not stick</div>
</div>
<div class="block">
  <div class="e1" style="height:80%">I will stick a little ..</div>
</div>
<div class="block" style="height:auto">
  <div class="e1">I will not stick too</div>
</div>

শেষ কেসটি লক্ষ্য করুন যেখানে পিতামাতার উচ্চতাটি auto (ডিফল্ট মান) তে সেট করা থাকে সুতরাং এর উচ্চতাটি তার সামগ্রী দ্বারা সংজ্ঞায়িত করা হবে যা স্টিকি উপাদানটিকে ব্লকযুক্ত সমান উচ্চতায় রাখে এবং কিছুই ঘটবে না কারণ সেখানে থাকবে না স্টিকি আচরণের জন্য জায়গা।


নিম্নলিখিত কোড ব্যবহার করে দেখুন:

.block {
  background: pink;
  width: 50%;
}

.movetop {
  position: sticky;
  top: 0;
  background: #ccc;
  padding: 10px;
  color: #ae81fe;
  z-index: 1;
  border: 1px solid #777;
}

.movebot {
  background: #ccc;
  padding: 10px;
  color: #ae81fe;
  position: -webkit-sticky;
  position: sticky;
  border: 1px solid #777;
}

.movebot {
  bottom: 0
}
11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>
<div class="block">
  <div class="movetop">
    header
  </div>
  content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>
  <div class="movebot">
    footer
  </div>
</div>
222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>

আপনি position:sticky সম্পর্কে আরও জানতে পারেন position:sticky gedd.ski/post/position-sticky position:sticky

আমি আসা করি এটা সাহায্য করবে.

শান্তি বর্ষিত হোক। 🖖





sticky