ଅବସ୍ଥାନ
ଏକ ଉପାଦାନର ସ୍ଥିତିକୁ ଶୀଘ୍ର ବିନ୍ୟାସ କରିବା ପାଇଁ ଏହି ଶୋର୍ଥାଣ୍ଡ୍ ୟୁଟିଲିଟିଗୁଡିକ ବ୍ୟବହାର କରନ୍ତୁ |
ସାଧାରଣ ମୂଲ୍ୟଗୁଡ଼ିକ |
ଦ୍ରୁତ ପୋଜିସନ୍ କ୍ଲାସ୍ ଉପଲବ୍ଧ, ଯଦିଓ ସେଗୁଡ଼ିକ ପ୍ରତିକ୍ରିୟାଶୀଳ ନୁହେଁ |
<div class="position-static">...</div>
<div class="position-relative">...</div>
<div class="position-absolute">...</div>
<div class="position-fixed">...</div>
<div class="position-sticky">...</div>
ଫିକ୍ସଡ୍ ଟପ୍ |
ଭ୍ୟୁପୋର୍ଟର ଉପରି ଭାଗରେ ଏକ ଉପାଦାନ ରଖନ୍ତୁ, ଧାରରୁ ଧାର ପର୍ଯ୍ୟନ୍ତ | ନିଶ୍ଚିତ କର ଯେ ତୁମେ ତୁମର ପ୍ରୋଜେକ୍ଟରେ ସ୍ଥିର ସ୍ଥିତିର ପ୍ରଭାବ ବୁ understand ିଛ; ଆପଣଙ୍କୁ ଅତିରିକ୍ତ CSS ଯୋଡିବାକୁ ପଡିପାରେ |
<div class="fixed-top">...</div>
ସ୍ଥିର ତଳ |
ଭ୍ୟୁପୋର୍ଟର ତଳ ଭାଗରେ, ଧାରରୁ ଧାର ପର୍ଯ୍ୟନ୍ତ ଏକ ଉପାଦାନ ରଖନ୍ତୁ | ନିଶ୍ଚିତ କର ଯେ ତୁମେ ତୁମର ପ୍ରୋଜେକ୍ଟରେ ସ୍ଥିର ସ୍ଥିତିର ପ୍ରଭାବ ବୁ understand ିଛ; ଆପଣଙ୍କୁ ଅତିରିକ୍ତ CSS ଯୋଡିବାକୁ ପଡିପାରେ |
<div class="fixed-bottom">...</div>
ଷ୍ଟିକି ଟପ୍ |
ଭ୍ୟୁପୋର୍ଟର ଉପରି ଭାଗରେ, ଏକ ଧାରରୁ ଧାର ପର୍ଯ୍ୟନ୍ତ ଏକ ଉପାଦାନ ରଖନ୍ତୁ, କିନ୍ତୁ ଆପଣ ଏହାକୁ ଅତୀତ ସ୍କ୍ରୋଲ୍ କରିବା ପରେ | .sticky-top
ଉପଯୋଗିତା CSS ର ବ୍ୟବହାର କରେ , position: sticky
ଯାହା ସମସ୍ତ ବ୍ରାଉଜରରେ ସମ୍ପୂର୍ଣ୍ଣ ସମର୍ଥିତ ନୁହେଁ |
IE11 ଏବଂ IE10 position: sticky
ପରି ପ୍ରଦର୍ଶନ କରିବ position: relative
| ଏହିପରି, ଆମେ @supports
ଶ yles ଳୀଗୁଡ଼ିକୁ ଏକ ଜିଜ୍ଞାସାରେ ଗୁଡ଼ାଇ ରଖୁ, କେବଳ ବ୍ରାଉଜର୍ରେ ଷ୍ଟିକ୍ସିକୁ ସୀମିତ କରେ ଯାହା ଏହାକୁ ସଠିକ୍ ଭାବରେ ଉପସ୍ଥାପନ କରିପାରିବ |
<div class="sticky-top">...</div>