{"id":302,"date":"2021-09-05T17:19:00","date_gmt":"2021-09-05T17:19:00","guid":{"rendered":"https:\/\/kiencang.net\/2013\/11\/05\/thuoc-tinh-z-index-trong-css-ly-thuyet-va-thuc-hanh\/"},"modified":"2021-09-05T17:19:00","modified_gmt":"2021-09-05T17:19:00","slug":"thuoc-tinh-z-index-trong-css-ly-thuyet-va-thuc-hanh","status":"publish","type":"post","link":"https:\/\/kiencang.net\/thuoc-tinh-z-index-trong-css-ly-thuyet-va-thuc-hanh\/","title":{"rendered":"Thu\u1ed9c t\u00ednh z-index trong CSS – l\u00fd thuy\u1ebft v\u00e0 th\u1ef1c h\u00e0nh"},"content":{"rendered":"\n

Thu\u1ed9c t\u00ednh z-index<\/b> d\u00f9ng \u0111\u1ec3 ch\u1ec9 th\u1ecb th\u1ee9 b\u1eadc c\u1ee7a c\u00e1c l\u1edbp th\u1ebb trong HTML. N\u00f3i m\u1ed9t c\u00e1ch \u0111\u01a1n gi\u1ea3n, n\u1ebfu c\u00e1c th\u1ebb l\u00e0 c\u00e1c trang gi\u1ea5y th\u00ec s\u1ed1 th\u1ee9 t\u1ef1 c\u1ee7a trang ch\u00ednh l\u00e0 ch\u1ec9 s\u1ed1 z-index<\/code>, l\u00e0m cho trang n\u00e0y \u1edf tr\u01b0\u1edbc trang kia.<\/p>\n\n\n\n

z-index lu\u00f4n \u0111i k\u00e8m v\u1edbi thu\u1ed9c t\u00ednh position<\/a>. Trong v\u00ed d\u1ee5 minh h\u1ecda \u1edf tr\u00ean, t\u00f4i c\u00f3 n\u00f3i v\u1ec1 c\u00e1c trang s\u00e1ch, n\u00f3 kh\u00f4ng ho\u00e0n to\u00e0n \u0111\u00fang h\u1eb3n, v\u00ec \u1edf s\u00e1ch, trang n\u00e0o c\u00f3 s\u1ed1 l\u1edbn th\u00ec n\u1eb1m d\u01b0\u1edbi, nh\u01b0ng v\u1edbi z-index, th\u1ebb HTML n\u00e0o c\u00f3 tr\u1ecb s\u1ed1 l\u1edbn th\u00ec n\u1eb1m l\u00ean tr\u00ean – t\u1ee9c l\u00e0 g\u1ea7n m\u1eaft h\u01a1n.<\/p>\n\n\n\n

Tr\u1ecb s\u1ed1 c\u1ee7a z-index ph\u1ea3i l\u00e0 s\u1ed1 nguy\u00ean, d\u01b0\u01a1ng ho\u1eb7c \u00e2m. N\u1ebfu ch\u00fang ta kh\u00f4ng quy \u0111\u1ecbnh gi\u00e1 tr\u1ecb c\u1ee5 th\u1ec3 c\u1ee7a z-index th\u00ec n\u00f3 m\u1eb7c \u0111\u1ecbnh l\u00e0 0, v\u00e0 trong trang HTML khi \u0111\u00f3, theo th\u1ee9 t\u1ef1 t\u1eeb tr\u00ean xu\u1ed1ng d\u01b0\u1edbi c\u1ee7a c\u00e1c d\u00f2ng code, c\u00e1c th\u1ebb \u1edf d\u01b0\u1edbi s\u1ebd x\u1ebfp ph\u00eda tr\u00ean. V\u00ed d\u1ee5:<\/p>\n\n\n\n

\n
 <\/div>\n
 <\/div>\n
 <\/div>\n<\/div>\n\n\n\n

Code m\u1eabu c\u1ee7a \u0111o\u1ea1n tr\u00ean:<\/p>\n\n\n\n

<div style=\"height: 280px; margin: 20px; position: relative;\">\n\n<div style=\"background-color: blue; height: 200px; left: 0px; position: absolute; top: 0px; width: 200px;\"><\/div>\n\n<div style=\"background-color: black; height: 200px; left: 40px; position: absolute; top: 40px; width: 200px;\"><\/div>\n\n<div style=\"background-color: red; height: 200px; left: 80px; position: absolute; top: 80px; width: 200px;\"><\/div>\n\n<\/div><\/code><\/pre>\n\n\n\n
T\u00f4i kh\u00f4ng vi\u1ebft ra gi\u00e1 tr\u1ecb c\u1ee5 th\u1ec3 c\u1ee7a z-index, do v\u1eady c\u00e1c th\u1ebb \u1edf d\u01b0\u1edbi s\u1ebd x\u1ebfp l\u00ean tr\u00ean, c\u0103n c\u1ee9 v\u00e0o \u0111o\u1ea1n code tr\u00ean th\u00ec \u0111\u00f3 ch\u00ednh l\u00e0 h\u1ed9p m\u00e0u \u0111\u1ecf<\/span>.<\/p>\n\n\n\n
Gi\u1edd t\u00f4i s\u1ebd \u0111\u1ec3 h\u1ed9p m\u00e0u \u0111en x\u1ebfp l\u00ean tr\u00ean c\u00f9ng, h\u1ed9p m\u00e0u xanh \u1edf v\u1ecb tr\u00ed th\u1ee9 hai, v\u00e0 h\u1ed9p m\u00e0u \u0111\u1ecf \u1edf v\u1ecb tr\u00ed cu\u1ed1i c\u00f9ng, \u0111\u1ec3 l\u00e0m \u0111\u01b0\u1ee3c vi\u1ec7c \u0111\u00f3, t\u00f4i s\u1ebd th\u00eam z-index v\u00e0o v\u00e0 \u0111\u1ec3 gi\u00e1 tr\u1ecb l\u1edbn h\u01a1n cho h\u1ed9p c\u1ea7n x\u1ebfp \u1edf v\u1ecb tr\u00ed cao<\/strong>.<\/p>\n\n\n\n
Code m\u1eabu:<\/p>\n\n\n\n
<div style=\"height: 280px; margin: 20px; position: relative;\u201d>\n\n<div style=\"background-color: blue; height: 200px; left: 100px; position: absolute; top: 0px; width: 200px; z-index: 2;\"><\/div>\n\n<div style=\"background-color: black; height: 200px; left: 40px; position: absolute; top: 40px; width: 200px; z-index: 3;\"><\/div>\n\n<div style=\"background-color: red; height: 200px; left: 140px; position: absolute; top: 80px; width: 200px; z-index: 1;\"><\/div>\n\n<\/div><\/code><\/pre>\n\n\n\n
C\u00e1c d\u00f2ng code v\u1eabn gi\u1eef nguy\u00ean th\u1ee9 t\u1ef1, tuy nhi\u00ean t\u00f4i c\u00f3 d\u1ecbch c\u00e1c h\u1ed9p sang tr\u00e1i v\u00e0 ph\u1ea3i \u0111\u00f4i ch\u00fat \u0111\u1ec3 b\u1ea1n d\u1ec5 quan s\u00e1t c\u00e1c l\u1edbp.<\/p>\n\n\n\n
\u0110\u1ec3 th\u1ebb n\u00e0o \u0111\u00f3 lu\u00f4n x\u1ebfp \u1edf v\u1ecb tr\u00ed cao nh\u1ea5t, ch\u00fang ta th\u01b0\u1eddng \u0111\u1ec3 z-index c\u1ee7a n\u00f3 th\u1eadt cao, ch\u1eb3ng h\u1ea1n z-index: 10; v\u00ed d\u1ee5 c\u00e1c thanh tr\u01b0\u1ee3t d\u1ecdc d\u00f9ng \u0111\u1ec3 like v\u00e0 share ta hay \u0111\u1ec3 z-index gi\u00e1 tr\u1ecb cao.<\/p>\n\n\n\n
Gi\u1edd ch\u00fang ta s\u1ebd th\u1ef1c h\u00e0nh v\u1ec1 z-index theo \u0111\u1ec1 b\u00e0i nh\u01b0 sau: t\u00f4i mu\u1ed1n m\u1ed9t h\u00ecnh \u1ea3nh, m\u00e0 khi hover qua n\u00f3 s\u1ebd \u0111\u1ed5i th\u00e0nh \u1ea3nh kh\u00e1c.<\/p>\n\n\n\n
\u00dd t\u01b0\u1edfng gi\u1ea3i y\u00eau c\u1ea7u tr\u00ean:<\/p>\n\n\n\n
  • T\u00f4i s\u1ebd t\u1ea1o 2 \u1ea3nh \u1edf c\u00f9ng m\u1ed9t v\u1ecb tr\u00ed v\u00e0 x\u1ebfp ch\u1ed3ng ch\u00fang l\u00ean nhau, \u1ea3nh c\u00f3 z-index cao s\u1ebd \u1edf tr\u00ean.<\/li>
  • Khi t\u00f4i hover qua \u1ea3nh, th\u00ec t\u00f4i s\u1ebd thay \u0111\u1ed5i gi\u00e1 tr\u1ecb z-index \u0111\u1ec3 \u1ea3nh d\u01b0\u1edbi s\u1ebd x\u1ebfp l\u00ean tr\u00ean.<\/li><\/ul>\n\n\n\n
    Code m\u1eabu:<\/p>\n\n\n\n
    CSS:<\/p>\n\n\n\n
    div {\nposition:relative;\nheight:252px;\n}\nimg {\nposition:absolute;\n}\n#tren:hover {\nz-index:-1;\n}\n#duoi:hover {\nz-index:1;\n}<\/code><\/pre>\n\n\n\n
    HTML:<\/p>\n\n\n\n
    <div id=\"zindex\">\n<img src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2021\/02\/chim.jpg\" id=\"duoi\"\/>\n<img src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2021\/02\/thanh-pho.jpg\" width=\"380\" height=\"251\" id=\"tren\">\n<\/div><\/code><\/pre>\n\n\n\n
    K\u1ebft qu\u1ea3:<\/p>\n\n\n\n