Bố cục CSS – Thuộc tính z-index – chỉ mục z kiểu nội tuyến

Bạn đang xem : kiểu nội tuyến của chỉ mục z

CSS

Bố cục – Thuộc tính z-index

Thuộc tính z-index chỉ định
thứ tự ngăn xếp của một phần tử.

Thuộc tính z-index

Khi các phần tử được định vị, chúng có thể chồng lên các phần tử khác.

Thuộc tính z-index chỉ định thứ tự ngăn xếp của một phần tử (phần tử nào nên được đặt phía trước hoặc phía sau phần tử khác).

Một phần tử có thể có thứ tự ngăn xếp dương hoặc âm:

Đây là một tiêu đề

Vì hình ảnh có chỉ số z là -1 nên nó sẽ được đặt phía sau văn bản.

Ví dụ

img
{

vị trí: tuyệt đối;
trái: 0px;

đầu trang: 0px;

z-index: -1;
}

Hãy tự mình thử »

Lưu ý: z-index chỉ hoạt động trên phần tử được định vị (vị trí: tuyệt đối,
vị trí: tương đối, vị trí: cố định hoặc vị trí: dính) và linh hoạt các mục
(các phần tử là phần tử con trực tiếp của màn hình: phần tử flex).

Một ví dụ z-index khác

Ví dụ

Ở đây, chúng ta thấy rằng phần tử có thứ tự ngăn xếp lớn hơn luôn ở trên phần tử có thứ tự ngăn xếp thấp hơn:

& lt; html & gt;
& lt; head & gt;
& lt; style & gt;
.container {
position: relative;
}

.black-box {
vị trí: tương đối;
z-index: 1;
border: 2px đặc đen;
height: 100px;
margin: 30px;
}

.gray-box {
vị trí: tuyệt đối;
z-index: 3;
background: lightgray;
height: 60px;
width: 70%;
left: 50px;
top: 50px;
}

.green-box {
vị trí: tuyệt đối;
Z-index: 2;
background: lightgreen;
chiều rộng: 35%;
trái: 270px;
trên cùng: -15px;
chiều cao:
100px;
}
& lt; / style & gt;
& lt; / head & gt;
& lt; body & gt;

& lt; div class = “container” & gt;
& lt; div
class = “black-box” & gt; Black box & lt; / div & gt;
& lt; div class = “gray-box” & gt; Grey
hộp & lt; / div & gt;
& lt; div class = “green-box” & gt; Hộp màu xanh lá cây & lt; / div & gt;
& lt; / div & gt;

Xem Thêm  Mảng Python - cách tìm kiếm một mảng trong python

& lt; / body & gt; < br /> & lt; / html & gt;

Hãy tự mình thử »

Không có z-index

Nếu hai phần tử được định vị chồng chéo lên nhau mà không có z-index
được chỉ định, phần tử được xác định cuối cùng trong mã HTML sẽ được hiển thị ở trên cùng.

Ví dụ

Cùng một ví dụ như trên, nhưng ở đây không có chỉ mục z nào được chỉ định:

& lt; html & gt;
& lt; head & gt;
& lt; style & gt;
.container {
position: relative;
}

.black-box {
vị trí: tương đối;
border: 2px đặc đen;
height: 100px;
margin: 30px;
}

.gray-box {
vị trí: tuyệt đối;
background: lightgray;
height: 60px;
width: 70%;
left: 50px;
top: 50px;
}

.green-box {
vị trí: tuyệt đối;
Background: lightgreen;
chiều rộng: 35%;
trái: 270px;
trên cùng: -15px;
chiều cao:
100px;
}
& lt; / style & gt;
& lt; / head & gt;
& lt; body & gt;

& lt; div class = “container” & gt;
& lt; div
class = “black-box” & gt; Black box & lt; / div & gt;
& lt; div class = “gray-box” & gt; Grey
hộp & lt; / div & gt;
& lt; div class = “green-box” & gt; Hộp màu xanh lá cây & lt; / div & gt;
& lt; / div & gt;

& lt; / body & gt; < br /> & lt; / html & gt;

Hãy tự mình thử »

Tự kiểm tra bằng các bài tập

Bài tập:

Cả tiêu đề và đoạn văn đều được đặt ở đầu trang.

Đảm bảo rằng tiêu đề được đặt ở đầu đoạn văn.

& lt; phong cách & gt;
 {
  vị trí: tuyệt đối;
  đầu: 0;
  : 1;
}
 {
  vị trí: tuyệt đối;
  đầu: 0;
  : 0;
}
& lt; / style & gt;

& lt; body & gt;
  & lt; h1 id = "mytitle" & gt; Đây là tiêu đề & lt; / h1 & gt;
  & lt; p id = "myintro" & gt; Đây là đoạn văn & lt; / p & gt;
& lt; / body & gt;

Bắt đầu bài tập

Thuộc tính CSS

Tài sản
Sự mô tả

z-index
Đặt thứ tự ngăn xếp của một phần tử


Xem thêm những thông tin liên quan đến chủ đề chỉ mục z kiểu nội tuyến

CHẠY ĐI CHỜ CHI – Tập 9 | Hari Won chứng minh SỨC TRÂU, Trấn Thành phấn khích Running Man Việt Nam

  • Tác giả: Chạy Đi Chờ Chi
  • Ngày đăng: 2019-06-08
  • Đánh giá: 4 ⭐ ( 4172 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Chạy Đi Chờ Chi |Tập 9 FULL| Trấn Thành lập team với Lan Ngọc, quyết xé bảng tên Hari Won | Running Man Việt Nam
    “CHẠY ĐI CHỜ CHI” kênh Youtube Chính Thức – “Chạy Đi Chờ Chi” – Running Man Vietnam được phát sóng 19g30 thứ bảy hàng tuần trên HTV7

    Nhanh tay subscribe ngay kênh Youtube chính thức: https://bit.ly/2YJZYjs
    ___________________________________

    Các thử thách của Chạy Đi Chờ Chi ngày càng khó khăn. Ở tập 9, Trấn Thành đã phải cùng Ninh Dương Lan Ngọc “đối phó” lại bà xã Hari Won. Chẳng biết “đuông dừa” nhà ta sẽ ứng phó ra sao đây? Tập 9 FULL của Chạy Đi Chờ Chi phát sóng lúc 19h30 thứ bảy ngày 8/6/2019 trên kênh HTV7.

    ChayDiChoChi RunningManVietNam2019 cdcc tap9

    Chạy Đi Chờ Chi (“CDCC”) là phiên bản Việt hóa (Running Man Vietnam) từ chương trình truyền hình ăn khách số 1 Hàn Quốc. Sau bao mong đợi và sự ủng hộ của đông đảo khán giả, chương trình đã chính thức lên sóng tập đầu tiên vào ngày 6/4/2019. Cùng với sự tham gia của dàn cast đình đám: Trấn Thành, Ngô Kiến Huy, Ninh Dương Lan Ngọc, Jun Phạm, Trương Thế Vinh, BB Trần, Liên Bỉnh Phát, đây sẽ là sân chơi giải trí vô cùng độc đáo dành cho các nghệ sĩ khách mời của showbiz Việt. Hứa hẹn mang lại những giây phút vui cười, sảng khoái cho các khán giả theo dõi vào mỗi tuần. Chạy Đi Chờ Chi được phát sóng định kì vào mỗi thứ 7 hàng tuần, lúc 19h30 trên kênh HTV7!

    ___________________________________
    ***Theo dõi các kênh chính thức từ chương trình***
    👉 Website: http://chaydichochi.vn/
    👉 Facebook: https://www.facebook.com/chaydichochi/
    👉 Youtube: http://www.youtube.com/c/chaydichochi/
    👉 Instagram: https://www.instagram.com/chaydichochi/

Phần tử khối và phần tử nội tuyến trong HTML

  • Tác giả: tedu.com.vn
  • Đánh giá: 3 ⭐ ( 7788 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tìm hiểu về các cấp độ phần tử trong HTML

TÔN CHỈ & MỤC ĐÍCH HOẠT ĐỘNG CỦA KÊNH “ NỘI THẤT TRỰC TUYẾN ”

  • Tác giả: www.vatlieunoithat.vn
  • Đánh giá: 3 ⭐ ( 2068 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Vatlieunoithat.vn là kênh giao thương trực tuyến giữa các nhà cung cấp vật tư, thiết bị, vật liệu ngành nội thất với các nhà thầu thi công và đơn vị tư vấn thiết kế kiến trúc/nội thất.

Công Thức Nội Suy Tuyến Tính, Hướng Dẫn Chi Tiết Cách Tính Nội Suy Chuẩn

  • Tác giả: thuychien.vn
  • Đánh giá: 4 ⭐ ( 9329 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: các nội suy tuyến tính là một phương pháp bắt nguồn từ phép nội suy tổng quát của Newton và cho phép xác định bằng cách xấp xỉ một giá trị không xác định nằm giữa hai số đã cho; đó là, có một giá trị trung gian, Nó cũng được áp dụng cho các hàm gần đúng, trong đó các giá trị f(a) và f(b) họ được biết đến và bạn muốn biết trung gian của f(x)

Các lớp giả CSS với các kiểu nội tuyến

  • Tác giả: qastack.vn
  • Đánh giá: 5 ⭐ ( 3388 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Không, điều này là không thể. Trong các tài liệu sử dụng CSS, một stylethuộc tính…

Tạo và Cập Nhật chỉ mục

  • Tác giả: support.microsoft.com
  • Đánh giá: 3 ⭐ ( 5231 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tạo, Cập Nhật hoặc xóa các mục nhập trong chỉ mục của docuument.

CÁC KIỂU CÂU PHÂN LOẠI THEO MỤC ĐÍCH NÓI

  • Tác giả: hocmai.vn
  • Đánh giá: 4 ⭐ ( 2832 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Dịch vụ học trực tuyến (học qua mạng) số 1 với các chương trình ôn, luyện thi, thi thử đại học online dành cho học sinh THPT, THCS.

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Hướng dẫn cơ bản về SQL Server KHÔNG Ràng buộc NULL bằng các ví dụ - máy chủ sql tạo bảng không null