ତୁମେ କେବେ CSS ର ଏକ ଉପାଦାନ ଉପରେ z-index: 99999 ସେଟ୍ କରିଛ, ଏବଂ ଏହା ଅନ୍ୟ ଉପାଦାନଗୁଡ଼ିକ ଉପରେ ବାହାରକୁ ଆସେ ନାହିଁ? ଏକ ମୂଲ୍ୟ ଯାହା ବଡ଼, ସେହି ଉପାଦାନକୁ ସହଜରେ ଅନ୍ୟ କ anything ଣସି ଜିନିଷ ଉପରେ ରଖିବା ଉଚିତ, ସମସ୍ତ ଭିନ୍ନ ଉପାଦାନଗୁଡିକ କମ୍ ମୂଲ୍ୟରେ ସେଟ୍ ହୋଇଛି କିମ୍ବା ଆଦ set ସେଟ୍ ହୋଇନାହିଁ ବୋଲି ମନେକର | ଏକ ୱେବପେଜ ସାଧାରଣତ a ଦୁଇ-ଡାଇମେନ୍ସନାଲ ସ୍ପେସରେ ଉପସ୍ଥାପିତ ହୁଏ | ତଥାପି, ନିର୍ଦ୍ଦିଷ୍ଟ CSS ଗୁଣଗୁଡିକ ପ୍ରୟୋଗ କରି, ଗଭୀରତା ପହଞ୍ଚାଇବା ପାଇଁ ଏକ କଳ୍ପିତ z-axis ବିମାନ ପରିଚିତ ହୁଏ | ଏହି ବିମାନଟି ପରଦାରେ p ର୍ଦ୍ଧ୍ୱରେ ରହିଥାଏ ଏବଂ ଏଥିରୁ ଉପଭୋକ୍ତା ଉପାଦାନଗୁଡ଼ିକର କ୍ରମକୁ ଅନୁଭବ କରନ୍ତି, ଗୋଟିଏ ଅନ୍ୟ ଉପରେ | କଳ୍ପିତ z-axis ପଛରେ ଥିବା ଧାରଣା, ଷ୍ଟାକ୍ ହୋଇଥିବା ଉପାଦାନଗୁଡ଼ିକର ଉପଭୋକ୍ତାଙ୍କର ଧାରଣା, ଏହା ହେଉଛି ଯେ CSS ଗୁଣ ଯାହା ଏହାକୁ ସୃଷ୍ଟି କରେ ଯାହାକୁ ଆମେ ଏକ ଷ୍ଟାକିଂ ପ୍ରସଙ୍ଗ ବୋଲି କହିଥାଉ | ଏକ ୱେବପୃଷ୍ଠାରେ ଉପାଦାନଗୁଡ଼ିକ କିପରି “ଷ୍ଟାକ୍” ହୋଇଛି, ଷ୍ଟାକିଂ କ୍ରମକୁ କ’ଣ ନିୟନ୍ତ୍ରଣ କରେ ଏବଂ ଆବଶ୍ୟକ ସମୟରେ “ଅନ୍ଷ୍ଟାକ” ଉପାଦାନଗୁଡ଼ିକ ଉପରେ ବ୍ୟବହାରିକ ଆଭିମୁଖ୍ୟ ବିଷୟରେ ଆମେ ଆଲୋଚନା କରିବାକୁ ଯାଉଛୁ | ଷ୍ଟାକିଂ ପ୍ରସଙ୍ଗଗୁଡ଼ିକ ବିଷୟରେ | ତୁମର ୱେବପୃଷ୍ଠାକୁ ଏକ ଡେସ୍କ ଭାବରେ କଳ୍ପନା କର | ଯେହେତୁ ଆପଣ HTML ଉପାଦାନଗୁଡିକ ଯୋଡିଛନ୍ତି, ଆପଣ ଡେସ୍କରେ ଗୋଟିଏ ପରେ ଗୋଟିଏ କାଗଜ ଖଣ୍ଡ ରଖିଛନ୍ତି | ରଖାଯାଇଥିବା ଶେଷ କାଗଜଟି ସମ୍ପ୍ରତି ଯୋଡି ହୋଇଥିବା HTML ଉପାଦାନ ସହିତ ସମାନ, ଏବଂ ଏହା ଏହା ପୂର୍ବରୁ ରଖାଯାଇଥିବା ଅନ୍ୟ ସମସ୍ତ କାଗଜପତ୍ର ଉପରେ ବସିଥାଏ | ନେଷ୍ଟେଡ୍ ଉପାଦାନଗୁଡ଼ିକ ପାଇଁ ମଧ୍ୟ ଏହା ହେଉଛି ସାଧାରଣ ଡକ୍ୟୁମେଣ୍ଟ୍ ପ୍ରବାହ | ଡେସ୍କ ନିଜେ ମୂଳ ଷ୍ଟାକିଂ ପ୍ରସଙ୍ଗକୁ ପ୍ରତିନିଧିତ୍ୱ କରେ, ଯାହା ଉପାଦାନ ଦ୍ୱାରା ଗଠିତ, ଯାହାକି ଅନ୍ୟ ସମସ୍ତ ଫୋଲ୍ଡରଗୁଡ଼ିକୁ ଧାରଣ କରିଥାଏ | ବର୍ତ୍ତମାନ, ନିର୍ଦ୍ଦିଷ୍ଟ CSS ଗୁଣଗୁଡିକ କାର୍ଯ୍ୟକାରୀ ହେଉଛି | ପୋଜିସନ୍ (z-index ସହିତ), ସ୍ୱଚ୍ଛତା, ରୂପାନ୍ତର ଏବଂ ଧାରଣ ପରି ଗୁଣଗୁଡିକ ଏକ ଫୋଲ୍ଡର୍ ପରି କାର୍ଯ୍ୟ କରେ | ଏହି ଫୋଲ୍ଡର୍ ଏକ ଉପାଦାନ ଏବଂ ଏହାର ସମସ୍ତ ପିଲାଙ୍କୁ ନେଇଥାଏ, ସେମାନଙ୍କୁ ମୁଖ୍ୟ ଷ୍ଟାକରୁ ବାହାର କରିଥାଏ ଏବଂ ସେମାନଙ୍କୁ ଏକ ପୃଥକ ସବ୍-ଷ୍ଟାକରେ ଗ୍ରୁପ୍ କରିଥାଏ, ଯାହାକୁ ଆମେ ଏକ ଷ୍ଟାକିଂ ପ୍ରସଙ୍ଗ ବୋଲି କହିଥାଉ | ପୋଜିସନ୍ ଉପାଦାନଗୁଡିକ ପାଇଁ, ଯେତେବେଳେ ଆମେ ଅଟୋ ବ୍ୟତୀତ ଏକ z- ଇଣ୍ଡେକ୍ସ ମୂଲ୍ୟ ଘୋଷଣା କରିବା ସେତେବେଳେ ଏହା ଘଟେ | ସ୍ୱଚ୍ଛତା, ରୂପାନ୍ତର ଏବଂ ଫିଲ୍ଟର ପରି ଗୁଣ ପାଇଁ, ନିର୍ଦ୍ଦିଷ୍ଟ ମୂଲ୍ୟ ପ୍ରୟୋଗ ହେଲେ ଷ୍ଟାକିଂ ପ୍ରସଙ୍ଗ ସ୍ୱୟଂଚାଳିତ ଭାବରେ ସୃଷ୍ଟି ହୁଏ |
ଏହାକୁ ବୁ to ିବାକୁ ଚେଷ୍ଟା କରନ୍ତୁ: ଥରେ କାଗଜ ଖଣ୍ଡ (ଯଥା, ଏକ ଶିଶୁ ଉପାଦାନ) ଏକ ଫୋଲ୍ଡର ଭିତରେ (ଯଥା, ପିତାମାତାଙ୍କ ଷ୍ଟାକିଂ ପ୍ରସଙ୍ଗ), ଏହା କେବେବି ସେହି ଫୋଲ୍ଡରରୁ ବାହାରିପାରିବ ନାହିଁ କିମ୍ବା କାଗଜପତ୍ର ମଧ୍ୟରେ ଭିନ୍ନ ଫୋଲ୍ଡରରେ ସ୍ଥାନିତ ହୋଇପାରିବ ନାହିଁ | ଏହାର z- ଇଣ୍ଡେକ୍ସ ବର୍ତ୍ତମାନ କେବଳ ନିଜ ଫୋଲ୍ଡର ଭିତରେ ପ୍ରାସଙ୍ଗିକ ଅଟେ |
ନିମ୍ନରେ ଥିବା ଚିତ୍ରରେ, ପେପର ବି ବର୍ତ୍ତମାନ ଫୋଲ୍ଡର ବି ର ଷ୍ଟାକିଂ ପ୍ରସଙ୍ଗରେ ଅଛି, ଏବଂ କେବଳ ଫୋଲ୍ଡରରେ ଥିବା ଅନ୍ୟ କାଗଜପତ୍ର ସହିତ ଅର୍ଡର ହୋଇପାରିବ |
କଳ୍ପନା କର, ଯଦି ତୁମେ ଚାହଁ, ତୁମର ଡେସ୍କରେ ଦୁଇଟି ଫୋଲ୍ଡର ଅଛି:
.ଫୋଲ୍ଡର- a {z- ଇଣ୍ଡେକ୍ସ: 1; } .ଫୋଲ୍ଡର- b {z-index: 2; }
ମାର୍କଅପ୍ ଟିକେ ଅପଡେଟ୍ କରିବା | ଫୋଲ୍ଡର ଭିତରେ ଏକ ସ୍ୱତନ୍ତ୍ର ପୃଷ୍ଠା, z-index: 9999। ଫୋଲ୍ଡର B ଭିତରେ ଏକ ସରଳ ପୃଷ୍ଠା, z-index: 5 |
.special-page {z-index: 9999; } .plain-page {z-index: 5; }
କେଉଁ ପୃଷ୍ଠା ଉପରେ ଅଛି? ଏହା ଫୋଲ୍ଡର ବି ର .ପ୍ଲେନ୍-ପେଜ୍ ଅଟେ | ବ୍ରାଉଜର୍ ଶିଶୁ କାଗଜପତ୍ରକୁ ଅଣଦେଖା କରେ ଏବଂ ପ୍ରଥମେ ଦୁଇଟି ଫୋଲ୍ଡର୍ ଷ୍ଟାକ୍ କରେ | ଏହା ଫୋଲ୍ଡର ବି (z-index: 2) କୁ ଦେଖେ ଏବଂ ଏହାକୁ ଫୋଲ୍ଡର A (z-index: 1) ଉପରେ ରଖେ କାରଣ ଆମେ ଜାଣୁ ଯେ ଦୁଇଟି ଗୋଟିଏରୁ ବଡ | ଏହି ସମୟରେ, .special-page z-index କୁ ସେଟ୍ ହୋଇଛି: 9999 ପୃଷ୍ଠା ଷ୍ଟାକର ତଳେ ଅଛି ଯଦିଓ ଏହାର z- ଇଣ୍ଡେକ୍ସ ସର୍ବାଧିକ ସମ୍ଭାବ୍ୟ ମୂଲ୍ୟରେ ସେଟ୍ ହୋଇଛି | ଷ୍ଟାକିଂ ପ୍ରସଙ୍ଗଗୁଡିକ ମଧ୍ୟ ବସା କରାଯାଇପାରେ (ଫୋଲ୍ଡର ଭିତରେ ଥିବା ଫୋଲ୍ଡର), ଏକ “ପରିବାର ବୃକ୍ଷ” ସୃଷ୍ଟି କରେ | ସମାନ ନୀତି ପ୍ରଯୁଜ୍ୟ: ଏକ ଶିଶୁ ନିଜ ପିତାମାତାଙ୍କ ଫୋଲ୍ଡରରୁ କେବେବି ରକ୍ଷା ପାଇପାରିବ ନାହିଁ | ବର୍ତ୍ତମାନ ତୁମେ ପାଇଛ ଯେ ଷ୍ଟାକିଂ ପ୍ରସଙ୍ଗଗୁଡିକ ଫୋଲ୍ଡର ପରି ଆଚରଣ କରେ ଯାହା ଗ୍ରୁପ୍ ଏବଂ ରେକର୍ଡ ସ୍ତରଗୁଡିକ, ଏହା ପଚାରିବା ଯୋଗ୍ୟ: କେତେକ ଗୁଣ - ରୂପାନ୍ତର ଏବଂ ସ୍ୱଚ୍ଛତା - ନୂତନ ଷ୍ଟାକିଂ ପ୍ରସଙ୍ଗ ସୃଷ୍ଟି କରେ କାହିଁକି? ଏଠାରେ ଜିନିଷଟି ହେଉଛି: ଏହି ଗୁଣଗୁଡିକ କିପରି ଦେଖାଯାଏ ସେଥିପାଇଁ ଷ୍ଟାକିଂ ପ୍ରସଙ୍ଗ ସୃଷ୍ଟି କରେ ନାହିଁ; ବ୍ରାଉଜର୍ କିପରି ହୁଡ୍ ତଳେ କାମ କରେ ସେଥିପାଇଁ ସେମାନେ ଏହା କରନ୍ତି | ଯେତେବେଳେ ତୁମେ ଟ୍ରାନ୍ସଫର୍ମ, ସ୍ୱଚ୍ଛତା, ଫିଲ୍ଟର, କିମ୍ବା ଦୃଷ୍ଟିକୋଣ ପ୍ରୟୋଗ କର, ତୁମେ ବ୍ରାଉଜରକୁ କହୁଛ, “ଆରେ, ଏହି ଉପାଦାନଟି ଘୁଞ୍ଚିପାରେ, ଘୂର୍ଣ୍ଣନ କରିପାରେ କିମ୍ବା କ୍ଷୀଣ ହୋଇପାରେ, ତେଣୁ ପ୍ରସ୍ତୁତ ରୁହ!”
ଯେତେବେଳେ ଆପଣ ଏହି ଗୁଣଗୁଡିକ ବ୍ୟବହାର କରନ୍ତି, ବ୍ରାଉଜର୍ ଅଧିକ ଦକ୍ଷତାର ସହିତ ରେଣ୍ଡରିଂ ପରିଚାଳନା କରିବାକୁ ଏକ ନୂତନ ଷ୍ଟାକିଂ ପ୍ରସଙ୍ଗ ସୃଷ୍ଟି କରେ | ଏହା ବ୍ରାଉଜରକୁ ସ୍ anim ାଧୀନ ଭାବରେ ଆନିମେସନ୍, ରୂପାନ୍ତର ଏବଂ ଭିଜୁଆଲ୍ ଇଫେକ୍ଟ ପରିଚାଳନା କରିବାକୁ ଅନୁମତି ଦିଏ, ବାକି ପୃଷ୍ଠାଗୁଡ଼ିକ ସହିତ ଏହି ଉପାଦାନଗୁଡ଼ିକ କିପରି କାର୍ଯ୍ୟ କରେ ତାହା ପୁନ al ଗଣନା କରିବାର ଆବଶ୍ୟକତାକୁ ହ୍ରାସ କରେ | ଏହାକୁ ବ୍ରାଉଜର୍ ଭାବରେ ଭାବନ୍ତୁ, “ମୁଁ ଏହି ଫୋଲ୍ଡରକୁ ପୃଥକ ଭାବରେ ପରିଚାଳନା କରିବି ତେଣୁ ପ୍ରତ୍ୟେକ ଥର ଏହାର ଭିତରେ କିଛି ପରିବର୍ତ୍ତନ ହେଲେ ମୋତେ ପୁରା ଡେସ୍କକୁ ପୁନ h ବଦଳାଇବାକୁ ପଡିବ ନାହିଁ |” କିନ୍ତୁ ସେଠାରେ ଅଛି |ଏକ ପାର୍ଶ୍ୱ ପ୍ରତିକ୍ରିୟା | ଥରେ ବ୍ରାଉଜର୍ ଏକ ଉପାଦାନକୁ ନିଜ ସ୍ତରରେ ଉଠାଇଲା ପରେ, ଏହା ନିଶ୍ଚିତ ଭାବରେ ଏହା ଭିତରେ ଥିବା ସମସ୍ତ ଜିନିଷକୁ “ଫ୍ଲାଟ” କରିବ, ଏକ ନୂତନ ଷ୍ଟାକିଂ ପ୍ରସଙ୍ଗ ସୃଷ୍ଟି କରିବ | ଏହାକୁ ପୃଥକ ଭାବରେ ପରିଚାଳନା କରିବା ପାଇଁ ଏହା ଡେସ୍କରୁ ଏକ ଫୋଲ୍ଡର ନେବା ପରି; ସେହି ଫୋଲ୍ଡର ଭିତରେ ଥିବା ସମସ୍ତ ଜିନିଷ ଗ୍ରୁପ୍ ହୋଇଯାଏ, ଏବଂ ବ୍ରାଉଜର୍ ବର୍ତ୍ତମାନ ଏହାକୁ ଏକକ ଏକକ ଭାବରେ ବ୍ୟବହାର କରେ ଯାହା ଉପରେ ଉପରେ ବସିଥାଏ | ତେଣୁ ଯଦିଓ ରୂପାନ୍ତର ଏବଂ ସ୍ୱଚ୍ଛତା ଗୁଣଗୁଡିକ ଉପାଦାନଗୁଡିକ ଦୃଶ୍ୟମାନ ଭାବରେ ଷ୍ଟାକ କରୁଥିବା ପଦ୍ଧତିକୁ ପ୍ରଭାବିତ କରୁଥିବା ପରି ଦେଖାଯାଇନପାରେ, ସେମାନେ ତାହା କରନ୍ତି, ଏବଂ ଏହା କାର୍ଯ୍ୟଦକ୍ଷତା ଅପ୍ଟିମାଇଜେସନ୍ ପାଇଁ | ଅନ୍ୟାନ୍ୟ CSS ଗୁଣଗୁଡ଼ିକ ମଧ୍ୟ ସମାନ କାରଣ ପାଇଁ ଷ୍ଟାକିଂ ପ୍ରସଙ୍ଗ ସୃଷ୍ଟି କରିପାରନ୍ତି | ଯଦି ଆପଣ ଗଭୀର ଖୋଳିବାକୁ ଚାହୁଁଛନ୍ତି ତେବେ MDN ଏକ ସମ୍ପୂର୍ଣ୍ଣ ତାଲିକା ପ୍ରଦାନ କରେ | ସେଠାରେ ବହୁତଗୁଡ଼ିଏ ଅଛି, ଯାହା କେବଳ ଜାଣିଶୁଣି ଅଜାଣତରେ ଏକ ଷ୍ଟାକିଂ ପ୍ରସଙ୍ଗ ସୃଷ୍ଟି କରିବା କେତେ ସହଜ ତାହା ବର୍ଣ୍ଣନା କରେ | “ଅନାବଶ୍ୟକ” ସମସ୍ୟା | ଅନେକ କାରଣରୁ ଷ୍ଟାକିଂ ସମସ୍ୟା ଉପୁଜିପାରେ, କିନ୍ତୁ କେତେକ ଅନ୍ୟମାନଙ୍କ ତୁଳନାରେ ଅଧିକ ସାଧାରଣ | ମୋଡାଲ୍ ଉପାଦାନଗୁଡ଼ିକ ହେଉଛି ଏକ କ୍ଲାସିକ୍ ପ୍ୟାଟର୍ କାରଣ ସେମାନେ ଅନ୍ୟ ଉପାଦାନଗୁଡିକ ଉପରେ ଏକ ଉପର ସ୍ତରରେ “ଖୋଲିବା” ପାଇଁ ଉପାଦାନକୁ ଟୋଗଲ୍ କରିବା ଆବଶ୍ୟକ କରନ୍ତି, ଏବଂ ଯେତେବେଳେ ଏହା ବନ୍ଦ ହୋଇଯାଏ ସେତେବେଳେ ଏହାକୁ ଉପର ସ୍ତରରୁ ବାହାର କରିଦିଆଯାଏ | ମୁଁ ନିଶ୍ଚିତ ଭାବେ ବିଶ୍ୱାସ କରେ ଯେ ଆମେ ସମସ୍ତେ ଏକ ପରିସ୍ଥିତିକୁ ଦ run ଡ଼ି ଆସିଛୁ ଯେଉଁଠାରେ ଆମେ ଏକ ମୋଡାଲ୍ ଖୋଲିଥାଉ ଏବଂ, କ whatever ଣସି କାରଣରୁ, ଏହା ଦୃଶ୍ୟମାନ ହୁଏ ନାହିଁ | ଏହା ନୁହେଁ ଯେ ଏହା ସଠିକ୍ ଭାବରେ ଖୋଲା ନାହିଁ, କିନ୍ତୁ ଏହା ଷ୍ଟାକିଂ ପ୍ରସଙ୍ଗର ଏକ ନିମ୍ନ ସ୍ତରରେ ଦୃଶ୍ୟ ବାହାରେ | ଏହା ଆପଣଙ୍କୁ ଆଶ୍ଚର୍ଯ୍ୟ କରିବାକୁ ଛାଡିଦିଏ “କିପରି ଆସେ?” ଯେହେତୁ ଆପଣ ସେଟ୍ କରିଛନ୍ତି:
.overlay { ଅବସ୍ଥାନ: ସ୍ଥିର; / * ଷ୍ଟାକିଂ ପ୍ରସଙ୍ଗ ସୃଷ୍ଟି କରେ * / z-index: 1; / * ଉପାଦାନକୁ ଅନ୍ୟ ସମସ୍ତ ଜିନିଷ ଉପରେ ଏକ ସ୍ତରରେ ରଖେ * / ଇନସେଟ: 0; ମୋଟେଇ: 100%; ଉଚ୍ଚତା: 100vh; ଓଭରଫ୍ଲୋ: ଲୁକ୍କାୟିତ; ପୃଷ୍ଠଭୂମି-ରଙ୍ଗ: # 00000080; }
ଏହା ସଠିକ୍ ଦେଖାଯାଉଛି, କିନ୍ତୁ ଯଦି ମୋଡାଲ୍ ଟ୍ରିଗର୍ ଧାରଣ କରିଥିବା ପ୍ୟାରେଣ୍ଟ୍ ଉପାଦାନ ଅନ୍ୟ ଏକ ପ୍ୟାରେଣ୍ଟ୍ ଉପାଦାନ ମଧ୍ୟରେ ଏକ ଶିଶୁ ଉପାଦାନ ଅଟେ ଯାହାକି z-index: 1 କୁ ମଧ୍ୟ ସେଟ୍ ହୋଇଛି, ଯାହା ଟେକ୍ନିକାଲ୍ ଭାବରେ ମୋଡାଲକୁ ମୁଖ୍ୟ ଫୋଲ୍ଡର ଦ୍ୱାରା ଲୁଚି ରହିଥିବା ଏକ ସବ୍ଲାୟରରେ ସ୍ଥାନିତ କରେ | ଚାଲନ୍ତୁ ସେହି ନିର୍ଦ୍ଦିଷ୍ଟ ଦୃଶ୍ୟ ଏବଂ ଅନ୍ୟାନ୍ୟ ସାଧାରଣ ଷ୍ଟାକିଂ-ପ୍ରସଙ୍ଗର ଦୁର୍ବଳତାକୁ ଦେଖିବା | ମୁଁ ଭାବୁଛି ଆପଣ କେବଳ ଦେଖିବେ ଯେ ଅଜାଣତରେ ଷ୍ଟାକିଂ ପ୍ରସଙ୍ଗ ସୃଷ୍ଟି କରିବା କେତେ ସହଜ, କିନ୍ତୁ ସେଗୁଡିକୁ କିପରି ପରିଚାଳନା କରାଯିବ ତାହା ମଧ୍ୟ ଆପଣ ଦେଖିବେ | ଆହୁରି ମଧ୍ୟ, ଆପଣ କିପରି ଏକ ପରିଚାଳିତ ସ୍ଥିତିକୁ ଫେରିବେ ତାହା ପରିସ୍ଥିତି ଉପରେ ନିର୍ଭର କରେ | ଦୃଶ୍ୟ 1: ଟ୍ରାପ୍ ମୋଡାଲ୍ |
ତୁମେ ତୁରନ୍ତ ତୁମର ମୋଡାଲ୍ ଏକ ନିମ୍ନ ସ୍ତରର ସ୍ତରରେ ଫସି ରହିଥିବାର ଦେଖି ପାରିବ ଏବଂ ପିତାମାତାଙ୍କୁ ଚିହ୍ନଟ କରିପାରିବ | ବ୍ରାଉଜର୍ ଏକ୍ସଟେନ୍ସନ୍ | ସ୍ମାର୍ଟ ଡେଭଲପର୍ମାନେ ସାହାଯ୍ୟ କରିବାକୁ ବିସ୍ତୃତକରଣ ନିର୍ମାଣ କରିଛନ୍ତି | ଏହି “CSS ଷ୍ଟାକିଂ ପ୍ରସଙ୍ଗ ଇନ୍ସପେକ୍ଟର” ପରି ଉପକରଣଗୁଡ଼ିକ କ୍ରୋମ ଏକ୍ସଟେନ୍ସନ୍ ଆପଣଙ୍କ DevTools ରେ ଏକ ଅତିରିକ୍ତ z- ଇଣ୍ଡେକ୍ସ ଟ୍ୟାବ୍ ଯୋଗ କରିଥାଏ ଯାହାକି ଏକ ଷ୍ଟାକିଂ ପ୍ରସଙ୍ଗ ସୃଷ୍ଟି କରୁଥିବା ଉପାଦାନଗୁଡ଼ିକ ବିଷୟରେ ସୂଚନା ଦେଖାଇଥାଏ |
IDE ବିସ୍ତୃତକରଣ | ବିକାଶ ସମୟରେ ଆପଣ VS କୋଡ୍ ପାଇଁ ଏହି ପରି ଏକ ଏକ୍ସଟେନ୍ସନ୍ ସହିତ ସମସ୍ୟାଗୁଡିକ ଚିହ୍ନଟ କରିପାରିବେ, ଯାହା ସିଧାସଳଖ ଆପଣଙ୍କ ସମ୍ପାଦକରେ ସମ୍ଭାବ୍ୟ ଷ୍ଟାକିଂ ପ୍ରସଙ୍ଗ ପ୍ରସଙ୍ଗକୁ ଆଲୋକିତ କରିଥାଏ |
ଅନାବଶ୍ୟକ ଏବଂ ନିୟନ୍ତ୍ରଣ ପୁନ aining ପ୍ରାପ୍ତ କରିବା | ଆମେ ମୂଳ କାରଣ ଚିହ୍ନଟ କରିବା ପରେ, ଏହାର ପରବର୍ତ୍ତୀ ପଦକ୍ଷେପ ହେଉଛି ଏହାର ମୁକାବିଲା କରିବା | ଏହି ସମସ୍ୟାର ମୁକାବିଲା ପାଇଁ ଆପଣ ଅନେକ ଉପାୟ ଅବଲମ୍ବନ କରିପାରିବେ, ଏବଂ ମୁଁ ସେମାନଙ୍କୁ କ୍ରମରେ ତାଲିକାଭୁକ୍ତ କରିବି | ଆପଣ ଯେକ any ଣସି ସ୍ତରରେ ଯେକ anyone ଣସି ବ୍ୟକ୍ତିଙ୍କୁ ବାଛିପାରିବେ, ଯଦିଓ; କେହି ଅଭିଯୋଗ କରିପାରିବେ ନାହିଁ କିମ୍ବା ଅନ୍ୟକୁ ବାଧା ଦେଇ ପାରିବେ ନାହିଁ | HTML ସଂରଚନା ପରିବର୍ତ୍ତନ କରନ୍ତୁ | ଏହାକୁ ସର୍ବୋତ୍କୃଷ୍ଟ ସମାଧାନ ଭାବରେ ବିବେଚନା କରାଯାଏ | ଏକ ଷ୍ଟାକିଂ ପ୍ରସଙ୍ଗ ପ୍ରସଙ୍ଗରେ ଚାଲିବା ପାଇଁ, ତୁମ HTML ମଧ୍ୟରେ ମଜାଳିଆ ଅବସ୍ଥାରେ କିଛି ଉପାଦାନ ରଖିବା ଜରୁରୀ | ପୃଷ୍ଠାର ପୁନ uct ନିର୍ମାଣ ଆପଣଙ୍କୁ DOM କୁ ପୁନ ape ରୂପ ଦେବାରେ ସାହାଯ୍ୟ କରିବ ଏବଂ ଷ୍ଟାକିଂ ପ୍ରସଙ୍ଗ ସମସ୍ୟା ଦୂର କରିବ | ସମସ୍ୟାଜନିତ ଉପାଦାନ ସନ୍ଧାନ କରନ୍ତୁ ଏବଂ ଏହାକୁ HTML ମାର୍କଅପ୍ ରେ ଟ୍ରାପିଙ୍ଗ୍ ଉପାଦାନରୁ ବାହାର କରନ୍ତୁ | ଉଦାହରଣ ସ୍ .ରୁପ, ଆମେ .modal- କଣ୍ଟେନରକୁ ହେଡର୍ ରୁ ବାହାର କରି ନିଜେ
ଉପାଦାନରେ ରଖି ପ୍ରଥମ ଦୃଶ୍ୟ “ଟ୍ରାପ୍ ମୋଡାଲ୍” ସମାଧାନ କରିପାରିବା |<ହେଡର୍ କ୍ଲାସ୍ = "ହେଡର୍"> |
ହେଡର୍ |
<ବଟନ୍ id = "ଓପନ୍-ମୋଡାଲ୍"> ମୋଡାଲ୍ ଖୋଲନ୍ତୁ |
|
ମୁଖ୍ୟ ବିଷୟବସ୍ତୁ |
ଏହି ବିଷୟବସ୍ତୁର 2 ର z- ଇଣ୍ଡେକ୍ସ ଅଛି ଏବଂ ତଥାପି ମୋଡାଲକୁ ଆଚ୍ଛାଦନ କରିବ ନାହିଁ |
ମୁଖ୍ୟ ବିଷୟବସ୍ତୁ |
ଏହି ବିଷୟବସ୍ତୁର 2 ର z- ଇଣ୍ଡେକ୍ସ ଅଛି ଏବଂ ତଥାପି ମୋଡାଲକୁ ଆଚ୍ଛାଦନ କରିବ ନାହିଁ |
ମୋଡାଲ୍ ଆଖ୍ୟା |
ବର୍ତ୍ତମାନ, ମୁଁ କିଛି ପଛରେ ନାହିଁ | DOM ପୁନ uct ନିର୍ମାଣର ଫଳାଫଳ ଭାବରେ ମୁଁ ଏକ ଉତ୍ତମ ସ୍ଥିତି ପାଇଛି |
| <ବଟନ୍ id = "କ୍ଲୋଜ୍-ମୋଡାଲ୍"> ବନ୍ଦ |ଯେତେବେଳେ ଆପଣ “ଓପନ୍ ମୋଡାଲ୍” ବଟନ୍ କ୍ଲିକ୍ କରନ୍ତି, ମୋଡାଲ୍ ଅନ୍ୟ ସମସ୍ତ ଜିନିଷ ସାମ୍ନାରେ ସ୍ଥିତ ହୋଇ ରହିଥାଏ | ପେନ୍ ଦୃଶ୍ୟ 1 ଦେଖନ୍ତୁ: ଶୋୟମ୍ବୋ ଗାବ୍ରିଏଲ୍ ଆୟୋମାଇଡ୍ ଦ୍ୱାରା ଟ୍ରାପ୍ ହୋଇଥିବା ମୋଡାଲ୍ (ସମାଧାନ) | ଆଡଜଷ୍ଟ୍ କରନ୍ତୁCSS ରେ ପ୍ୟାରେଣ୍ଟ୍ ଷ୍ଟାକିଂ ପ୍ରସଙ୍ଗ | ଯଦି ଉପାଦାନଟି ଗୋଟିଏ, ତେବେ ଆପଣ ଲେଆଉଟ୍ ନ ଭାଙ୍ଗି ଘୁଞ୍ଚି ପାରିବେ ନାହିଁ? ସମସ୍ୟାର ସମାଧାନ କରିବା ଭଲ: ପିତାମାତା ପ୍ରସଙ୍ଗ ପ୍ରତିଷ୍ଠା କରନ୍ତି | ପ୍ରସଙ୍ଗକୁ ଟ୍ରିଗର କରିବା ପାଇଁ ଦାୟୀ CSS ସମ୍ପତ୍ତି (କିମ୍ବା ଗୁଣ) ଖୋଜ ଏବଂ ଏହାକୁ ହଟାନ୍ତୁ | ଯଦି ଏହାର ଏକ ଉଦ୍ଦେଶ୍ୟ ଅଛି ଏବଂ ଏହାକୁ ଅପସାରଣ କରାଯାଇପାରିବ ନାହିଁ, ତେବେ ସମଗ୍ର ପାତ୍ରକୁ ଉଠାଇବା ପାଇଁ ପିତାମାତାଙ୍କୁ ଏହାର ଭାଇଭାଇନ୍ ଉପାଦାନ ଅପେକ୍ଷା ଅଧିକ z- ଇଣ୍ଡେକ୍ସ ମୂଲ୍ୟ ଦିଅନ୍ତୁ | ଏକ ଉଚ୍ଚ z- ସୂଚକାଙ୍କ ମୂଲ୍ୟ ସହିତ, ପ୍ୟାରେଣ୍ଟ୍ ପାତ୍ରଟି ଉପରକୁ ଯାଏ, ଏବଂ ଏହାର ପିଲାମାନେ ଉପଭୋକ୍ତାଙ୍କ ନିକଟତର ହୁଅନ୍ତି | “ଜଳମଗ୍ନ ଡ୍ରପଡାଉନ୍” ଦୃଶ୍ୟରେ ଆମେ ଯାହା ଶିଖିଲୁ ତାହା ଉପରେ ଆଧାର କରି, ଆମେ ଡ୍ରପଡାଉନ୍ କୁ ନାଭବାରରୁ ବାହାର କରିପାରିବୁ ନାହିଁ; ଏହାର ଅର୍ଥ ହେବ ନାହିଁ | ତଥାପି, ଆମେ .navbar ପାତ୍ରର z- ଇଣ୍ଡେକ୍ସ ମୂଲ୍ୟକୁ .content ଉପାଦାନର z- ଇଣ୍ଡେକ୍ସ ମୂଲ୍ୟଠାରୁ ଅଧିକ ହେବା ପାଇଁ ବୃଦ୍ଧି କରିପାରିବା | .navbar { ପୃଷ୍ଠଭୂମି: # 333; / * z-index: 1; * / z-index: 3; ଅବସ୍ଥାନ: ସମ୍ପର୍କୀୟ; }
ଏହି ପରିବର୍ତ୍ତନ ସହିତ, .dropdown-menu ବର୍ତ୍ତମାନ କ issue ଣସି ସମସ୍ୟା ବିନା ବିଷୟବସ୍ତୁ ସମ୍ମୁଖରେ ଦେଖାଯାଏ | ପେନ୍ ଦୃଶ୍ୟ 2 ଦେଖନ୍ତୁ: ଶୋଏମ୍ବୋ ଗାବ୍ରିଏଲ୍ ଆୟୋମାଇଡ୍ ଦ୍ୱାରା ଜଳମଗ୍ନ ଡ୍ରପଡାଉନ୍ (ସମାଧାନ) | ପୋର୍ଟାଲ୍ ଚେଷ୍ଟା କରନ୍ତୁ, ଯଦି ଏକ ଫ୍ରେମୱାର୍କ ବ୍ୟବହାର କରୁଛନ୍ତି | React କିମ୍ବା Vue ପରି framework ାଞ୍ଚାରେ, ଏକ ପୋର୍ଟାଲ୍ ହେଉଛି ଏକ ବ feature ଶିଷ୍ଟ୍ୟ ଯାହା ଆପଣଙ୍କୁ DOM ରେ ଏହାର ସାଧାରଣ ପ୍ୟାରେଣ୍ଟ୍ ହାଇରାର୍କି ବାହାରେ ଏକ ଉପାଦାନ ପ୍ରଦାନ କରିବାକୁ ଦେଇଥାଏ | ପୋର୍ଟାଲ୍ ଗୁଡିକ ତୁମର ଉପାଦାନଗୁଡ଼ିକ ପାଇଁ ଏକ ଟେଲିପୋର୍ଟେସନ୍ ଡିଭାଇସ୍ ପରି | ସେମାନେ ଆପଣଙ୍କୁ ଏକ ଉପାଦାନର HTML କୁ ଡକ୍ୟୁମେଣ୍ଟ୍ ର ଯେକ anywhere ଣସି ସ୍ଥାନରେ (ସାଧାରଣତ document ଡକ୍ୟୁମେଣ୍ଟ୍.ବୋରେ) ରେଣ୍ଡର୍ କରିବାକୁ ଦିଅନ୍ତି ଯେତେବେଳେ ଏହାକୁ ପ୍ରପ୍ସ୍, ଷ୍ଟେଟ୍, ଏବଂ ଇଭେଣ୍ଟଗୁଡିକ ପାଇଁ ଏହାର ମୂଳ ପିତାମାତା ସହିତ ଯୁକ୍ତିଯୁକ୍ତ ଭାବରେ ସଂଯୁକ୍ତ ରଖନ୍ତି | ଷ୍ଟାକିଂ ପ୍ରସଙ୍ଗ ଫାନ୍ଦରୁ ରକ୍ଷା ପାଇବା ପାଇଁ ଏହା ଉପଯୁକ୍ତ, କାରଣ ରେଣ୍ଡେଡ୍ ଆଉଟପୁଟ୍ ଆକ୍ଷରିକ ଭାବରେ ସମସ୍ୟାଜନିତ ପ୍ୟାରେଣ୍ଟ୍ ପାତ୍ର ବାହାରେ ଦେଖାଯାଏ | ReactDOM.createPortal ( <ଟୁଲ୍ ଟିପ୍ />, ଡକ୍ୟୁମେଣ୍ଟ୍ );
ଏହା ନିଶ୍ଚିତ କରେ ଯେ ଆପଣଙ୍କର ଡ୍ରପଡାଉନ୍ ବିଷୟବସ୍ତୁ ଏହାର ପିତାମାତାଙ୍କ ପଛରେ ଲୁକ୍କାୟିତ ନୁହେଁ, ଯଦିଓ ପିତାମାତାଙ୍କର ଓଭରଫ୍ଲୋ ଅଛି: ଲୁକ୍କାୟିତ କିମ୍ବା ଏକ ନିମ୍ନ z- ସୂଚକାଙ୍କ | “କ୍ଲିପ୍ ହୋଇଥିବା ଟୁଲଟିପ୍” ଦୃଶ୍ୟରେ ଆମେ ପୂର୍ବରୁ ଦେଖିଥିଲୁ, ମୁଁ ଟୁଲ୍ ଟିପ୍କୁ ଓଭରଫ୍ଲୋରୁ ଉଦ୍ଧାର କରିବା ପାଇଁ ଏକ ପୋର୍ଟାଲ୍ ବ୍ୟବହାର କରିଥିଲି: ଲୁକ୍କାୟିତ କ୍ଲିପ୍ ଏହାକୁ ଡକ୍ୟୁମେଣ୍ଟ୍ ବଡିରେ ରଖି କଣ୍ଟେନର ଭିତରେ ଟ୍ରିଗର ଉପରେ ରଖି | ପେନ୍ ଦୃଶ୍ୟ 3 ଦେଖନ୍ତୁ: ଶୋୟମ୍ବୋ ଗାବ୍ରିଏଲ୍ ଆୟୋମାଇଡ୍ ଦ୍ୱାରା କ୍ଲିପ୍ ହୋଇଥିବା ଟୁଲ୍ଟିପ୍ (ସମାଧାନ) | ପାର୍ଶ୍ୱ ପ୍ରଭାବ ବିନା ଷ୍ଟାକିଂ ପ୍ରସଙ୍ଗର ପରିଚୟ | ପୂର୍ବ ବିଭାଗରେ ବର୍ଣ୍ଣିତ ସମସ୍ତ ପନ୍ଥା ସମସ୍ୟାଜନିତ ଷ୍ଟାକିଂ ପ୍ରସଙ୍ଗରୁ ଉପାଦାନଗୁଡ଼ିକୁ “ଅନ୍-ଷ୍ଟାକିଂ” କରିବା ପାଇଁ ଉଦ୍ଦିଷ୍ଟ, କିନ୍ତୁ କିଛି ପରିସ୍ଥିତି ଅଛି ଯେଉଁଠାରେ ଆପଣ ପ୍ରକୃତରେ ଏକ ଷ୍ଟାକିଂ ପ୍ରସଙ୍ଗ ସୃଷ୍ଟି କରିବାକୁ ଚାହୁଁଥିବେ | ଏକ ନୂତନ ଷ୍ଟାକିଂ ପ୍ରସଙ୍ଗ ସୃଷ୍ଟି କରିବା ସହଜ, କିନ୍ତୁ ସମସ୍ତ ପନ୍ଥା ପାର୍ଶ୍ୱ ପ୍ରତିକ୍ରିୟା ସହିତ ଆସିଥାଏ | ତାହା ହେଉଛି, ବିଚ୍ଛିନ୍ନତା ବ୍ୟବହାର କରିବା ବ୍ୟତୀତ: ବିଚ୍ଛିନ୍ନ କରନ୍ତୁ | ଯେତେବେଳେ ଏକ ଉପାଦାନରେ ପ୍ରୟୋଗ କରାଯାଏ, ସେହି ଉପାଦାନର ପିଲାମାନଙ୍କର ଷ୍ଟାକିଂ ପ୍ରସଙ୍ଗ ପ୍ରତ୍ୟେକ ପିଲାଙ୍କ ସହିତ ଏବଂ ସେହି ପ୍ରସଙ୍ଗରେ ନିର୍ଣ୍ଣୟ କରାଯାଏ, ଏହା ବାହାରେ ଉପାଦାନ ଦ୍ୱାରା ପ୍ରଭାବିତ ହେବା ପରିବର୍ତ୍ତେ | ଏକ କ୍ଲାସିକ୍ ଉଦାହରଣ ସେହି ଉପାଦାନକୁ ଏକ ନକାରାତ୍ମକ ମୂଲ୍ୟ ନ୍ୟସ୍ତ କରୁଛି, ଯେପରିକି z-index: -1 | କଳ୍ପନା କରନ୍ତୁ ଆପଣଙ୍କର ଏକ .କାର୍ଡ ଉପାଦାନ ଅଛି | ଆପଣ ଏକ ସାଜସଜ୍ଜା ଆକୃତି ଯୋଡିବାକୁ ଚାହାଁନ୍ତି ଯାହା .card ର ପାଠ୍ୟ ପଛରେ ବସିଥାଏ, କିନ୍ତୁ କାର୍ଡର ପୃଷ୍ଠଭୂମି ଉପରେ | କାର୍ଡରେ ଏକ ଷ୍ଟାକିଂ ପ୍ରସଙ୍ଗ ବିନା, z-index: -1 ଆକୃତିକୁ ମୂଳ ଷ୍ଟାକିଂ ପ୍ରସଙ୍ଗ (ସମଗ୍ର ପୃଷ୍ଠା) ର ତଳ ଭାଗକୁ ପଠାଏ | ଏହା .card ର ଧଳା ପୃଷ୍ଠଭୂମି ପଛରେ ଅଦୃଶ୍ୟ ହୋଇଯାଏ: ଶୋୟୋମ୍ବୋ ଗାବ୍ରିଏଲ୍ ଆୟୋମାଇଡ୍ ଦ୍ୱାରା ପେନ୍ ନେଗେଟିଭ୍ z- ଇଣ୍ଡେକ୍ସ (ସମସ୍ୟା) [ଫଙ୍କଡ୍] ଦେଖନ୍ତୁ | ଏହାର ସମାଧାନ ପାଇଁ, ଆମେ ବିଚ୍ଛିନ୍ନତା ଘୋଷଣା କରୁ: ପ୍ୟାରେଣ୍ଟ୍ ଉପରେ ପୃଥକ କରନ୍ତୁ .କାର୍ଡ: ଶୋୟୋମ୍ବୋ ଗାବ୍ରିଏଲ୍ ଆୟୋମାଇଡ୍ ଦ୍ୱାରା ପେନ୍ ନେଗେଟିଭ୍ z- ଇଣ୍ଡେକ୍ସ (ସମାଧାନ) ଦେଖନ୍ତୁ | ବର୍ତ୍ତମାନ, .card ଉପାଦାନ ନିଜେ ଏକ ଷ୍ଟାକିଂ ପ୍ରସଙ୍ଗ ହୋଇଯାଏ | ଯେତେବେଳେ ଏହାର ଶିଶୁ ଉପାଦାନ - ସଜାଯାଇଥିବା ଆକୃତିର: ଛଉ-ଉପାଦାନ ପୂର୍ବରୁ - z-index: -1 ଥାଏ, ଏହା ପିତାମାତାଙ୍କ ଷ୍ଟାକିଂ ପ୍ରସଙ୍ଗର ନିମ୍ନ ଭାଗକୁ ଯାଇଥାଏ | ଉଦ୍ଦେଶ୍ୟ ଅନୁଯାୟୀ ଏହା ପାଠ୍ୟ ପଛରେ ଏବଂ କାର୍ଡର ପୃଷ୍ଠଭୂମି ଉପରେ ସମ୍ପୂର୍ଣ୍ଣ ରୂପେ ବସିଥାଏ | ସିଦ୍ଧାନ୍ତ ମନେରଖନ୍ତୁ: ପରବର୍ତ୍ତୀ ସମୟରେ ଆପଣଙ୍କର z- ସୂଚକାଙ୍କ ନିୟନ୍ତ୍ରଣ ବାହାରେ ଦେଖାଯିବାବେଳେ ଏହା ଏକ ଫାଶିତ ଷ୍ଟାକିଂ ପ୍ରସଙ୍ଗ ଅଟେ | ସନ୍ଦର୍ଭ
ଷ୍ଟାକିଂ ପ୍ରସଙ୍ଗ (MDN) Z-index ଏବଂ stacking ପ୍ରସଙ୍ଗ (web.dev) “CSS ରେ ବିଚ୍ଛିନ୍ନତା ସମ୍ପତ୍ତି ସହିତ କିପରି ଏକ ନୂତନ ଷ୍ଟାକିଂ ପ୍ରସଙ୍ଗ ସୃଷ୍ଟି କରିବେ”, ନାଟାଲୀ ପିନା | “କ’ଣ ହେକ୍, z- ଇଣ୍ଡେକ୍ସ ??”, ଜୋସ୍ କମାଉ |
SmashingMag ଉପରେ ପରବର୍ତ୍ତୀ ପଠନ |
“ବଡ଼ ପ୍ରୋଜେକ୍ଟରେ CSS Z- ଇଣ୍ଡେକ୍ସ ପରିଚାଳନା”, ଷ୍ଟିଭେନ୍ ଫ୍ରିସନ୍ | “ଷ୍ଟିକି ହେଡର୍ସ ଏବଂ ଫୁଲ୍ ଉଚ୍ଚତା ଉପାଦାନଗୁଡିକ: ଏକ ଚତୁର ମିଶ୍ରଣ”, ଫିଲିପ୍ ବ୍ରାଉନେନ୍ | “ଏକ ଉପାଦାନ-ଆଧାରିତ ୱେବ୍ ପ୍ରୟୋଗରେ Z- ଇଣ୍ଡେକ୍ସ ପରିଚାଳନା”, ପାଭେଲ୍ ପୋମେରାଣ୍ଟେଭ୍ | “ଜେ-ଇଣ୍ଡେକ୍ସ CSS ସମ୍ପତ୍ତି: ଏକ ବିସ୍ତୃତ ଦୃଶ୍ୟ”, ଲୁଇ ଲାଜାରିସ୍ |
