Thuộc tính z-index trong CSS | Học HTML & CSS

Thuộc tính z-index trong CSS | Học HTML & CSS

Thuộc tính z-index trong CSS giúp chúng ta có thể sắp xếp một element theo trục z. Trục Z là trục nằm vuông góc với màn hình chúng ta đang theo dõi, nó sẽ quyết định một element nằm trên hoặc dưới một element khác.

Thuộc tính z-index trong CSS | Học HTML & CSS

Thuộc tính z-index trong CSS giúp chúng ta có thể sắp xếp một element theo trục z. Trục Z là trục nằm vuông góc với màn hình chúng ta đang theo dõi, nó sẽ quyết định một element nằm trên hoặc dưới một element khác.

Trong video này chúng ta sẽ lần lượt tìm hiểu về các đặc điểm của z-index như sau:

  • Các elements ở trong cùng 1 stacking context, khi không được set thuộc tính z-index thì element xuất hiện sau sẽ nằm chồng lên element xuất hiện trước nó
  • Positioned Element là element mà được set giá trị của thuộc tính position khác với static, có thể là relative, absolute hoặc fixed
  • Unpositioned Element là element mà không được set giá trị của thuộc tính position (mặc định sẽ có giá trị là static)
  • Position Element sẽ nằm lên trên một unpositioned element
  • Một số thuộc tính CSS như transform và opacity sẽ làm cho element tạo ra một stacking context mới
  • Giá trị z-index của 1 element có thể bị giới hạn bởi thuộc tính z-index của element cha

css html

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Sidebar Menu Using Only HTML and CSS | Side Navigation Bar

Sidebar Menu Using Only HTML and CSS | Side Navigation BarHello friends, Today in this video you'll learn how to create a Sidebar Menu using HTML and CSS onl...

HTML Tutorial For Beginners

In this article, we’ll tutorial the best ways for learning HTML to assist you on your programming journey.

Neumorphism Card Design using HTML and CSS | Pure CSS Card

Let's design a card with Neumorphism UI using pure HTML and CSS code.

Menu Design using HTML and CSS | Tile Menu using HTML and CSS

Let's code a simple and best looking menu tiles using HTML and CSS

Create a Personal Portfolio Website Using HTML CSS and JavaScript

how to design a personal portfolio website using HTML, CSS, and JavaScript code. I have previously designed many more websites and personal portfolio designs...