Hướng dẫn css bring text to front - css đưa văn bản lên phía trước

Thêm một số CSS để đặt chỉ mục Z của văn bản lớn hơn hình ảnh

Nội dung chính Show

• Văn bản hình ảnh
• Cách đặt văn bản vào hình ảnh
• Mã này tạo ra hai container Div với giá trị ID của Div1 và Div2. Container Div1 giữ một tiêu đề có nội dung "tiêu đề 1." Tiêu đề của Div thứ hai có nội dung "tiêu đề 2." Hai div này ngồi bên trong một div chính có ID là "chính".
• Mã này tạo ra chức năng JavaScript Changezindex. Hàm đó chấp nhận bốn tham số mà nút nhấp vào truyền và thay đổi các giá trị chỉ số z của Div1 và Div2 cho các giá trị được truyền đến hàm. Vì nút Nhấp vào chuyển -1 dưới dạng giá trị của Div1 và 1 là giá trị của Div2, mã làm cho div2 xuất hiện trên đầu div1 khi nó chạy.
• Tại sao Z
• Chúng ta có thể sử dụng gì thay vì z
• Z như thế nào

HTML

my text

CSS

#text{
    z-index: 1;
}

#image{
    z-index: -1;
}

Lưu ý Bạn phải định vị cả hai phần tử để chỉ số z có hiệu lực. Vị trí sử dụng: Tuyệt đối, Vị trí: tương đối hoặc vị trí: Đã sửa lỗi

Chỉnh sửa: Rahul đã chỉ ra một cách đúng đắn mã ban đầu được sử dụng href thay vì SRC. Cập nhật vì SRC là thực hành tốt hơn

Ngày 19 tháng 1 năm 2011 lúc 11:47 tối #31318 #31318

Xin chào các bạn. Tôi va vào một vấn đề nhỏ ở đây. Bạn thấy ở dưới cùng của văn bản, có một permalink với một văn bản nói Say Hullo ở đây. Nhưng vì tôi đặt một thay thế hình ảnh lớn bên trong thẻ H3, tôi có thể nhấp vào liên kết. Bằng cách nào đó hình ảnh được xếp lớp trên văn bản. Vấn đề chỉ xảy ra ở phần dưới của văn bản cơ thể, nếu không, nó OK OK.
I bump into a small problem here. You see in the bottom of the text, there is a permalink with a text “say hullo here”. But because I put a huge image replacement inside h3 tag, I can’t click the link. Somehow the image is layered above the text. The problem just occur in the lower part of the body text, otherwise, it’s ok.

Bạn có đề nghị gì? Cảm ơn.
Thanks.

Ngày 20 tháng 1 năm 2011 lúc 1:10 sáng #65071 #65071

Whopsie. Xin lỗi. Thử lại lần nữa :).

Ngày 20 tháng 1 năm 2011 lúc 5:40 sáng #65077 #65077

Này Memento,

Một sửa chữa nhanh chóng sẽ là điều này.

Trên thẻ H2 của bạn, ganis angger atmawarin với hình ảnh nền thay đổi chỉ số z của bạn: tự động; đến 2Ganis Angger Atmawarin with the background image change your z-index: auto; to:

z-index: 1;


Trên content_sec của bạn, thêm điều này:
z-index: 1000;
position: relative;
content_sec add this:

z-index: 1000;
position: relative;


Hi vọng điêu nay co ich,

Sliver37

Ngày 20 tháng 1 năm 2011 lúc 10:02 sáng #65079 #65079

Sliver, mà giải quyết vấn đề. Bạn là người đàn ông. Cảm ơn rất nhiều.

Ngày 22 tháng 3 năm 2013 lúc 2:16 AM #129305 #129305

Này ** sliver37 ** Cảm ơn bạn!
**sliver37** thank u!

---

Tìm hiểu cách đặt văn bản qua một hình ảnh.

---

Văn bản hình ảnh

Phía dưới bên trái

Trên cùng bên trái

Trên cùng bên phải

Góc phải ở phía dưới

Tập trung

Hãy tự mình thử »

---

Cách đặt văn bản vào hình ảnh

Bước 1) Thêm HTML:

Thí dụ

& nbsp; & nbsp; Dưới cùng bên trái & nbsp; Trên cùng bên trái & nbsp; Trên cùng bên phải & nbsp; Dưới cùng bên phải & nbsp; Tập trung
 

 

Bottom Left

 

Top Left

 

Top Right

 

Bottom Right

 

Centered

Bước 2) Thêm CSS:

Thí dụ

& nbsp; & nbsp; Dưới cùng bên trái & nbsp; Trên cùng bên trái & nbsp; Trên cùng bên phải & nbsp; Dưới cùng bên phải & nbsp; Tập trung
.container {
  position: relative;
  text-align: center;
  color: white;
}

Bước 2) Thêm CSS:
.bottom-left {
  position: absolute;
  bottom: 8px;
  left: 16px;
}

/ * Container giữ hình ảnh và văn bản */. Container {& nbsp; Vị trí: tương đối; & nbsp; Văn bản-Align: Trung tâm; & nbsp; màu trắng;}
.top-left {
  position: absolute;
  top: 8px;
  left: 16px;
}

/ * Văn bản dưới cùng bên trái */ .bottom-left {& nbsp; Vị trí: Tuyệt đối; & nbsp; Dưới cùng: 8px; & nbsp; Trái: 16px;}
.top-right {
  position: absolute;
  top: 8px;
  right: 16px;
}

/ * Văn bản trên cùng bên trái */. TOP-bên trái {& nbsp; & nbsp; vị trí: tuyệt đối; & nbsp; Top: 8px; & nbsp; Trái: 16px;}
.bottom-right {
  position: absolute;
  bottom: 8px;
  right: 16px;
}

/ * Văn bản bên phải hàng đầu */. TOP-bên phải {& nbsp; Vị trí: Tuyệt đối; & nbsp; Top: 8px; & nbsp; Phải: 16px;}
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Hãy tự mình thử »

Cách đặt văn bản vào hình ảnh

Bước 1) Thêm HTML:

HTML Div Container giúp bạn có thể thêm các hiệu ứng đặc biệt thú vị vào các trang web trên trang web kinh doanh của bạn. Divs, hoạt động như các tấm kính, có thể giữ các yếu tố HTML khác như các đối tượng văn bản. Một thuộc tính CSS có tên Z-index xác định thứ tự các div xuất hiện khi bạn xếp một cái lên đầu. Bằng cách thay đổi thuộc tính Z-Index của DIV, bạn cũng có thể thay đổi thứ tự của DIV trong ngăn xếp. Được trang bị kiến ​​thức này, bạn có thể làm cho văn bản trong một div xuất hiện trước văn bản trong một div khác bằng cách thay đổi giá trị chỉ số z của nó.

1. Mở tài liệu HTML của bạn và thêm mã sau vào phần của tài liệu:

   Bước 2) Thêm CSS:

   Đứng đầu một

   Đứng đầu hai

   Bước 2) Thêm CSS:

   Đứng đầu một

2. Đứng đầu hai

   Bước 2) Thêm CSS:

   Đứng đầu một

3. Đứng đầu hai

   Mã này tạo ra hai container Div với giá trị ID của Div1 và Div2. Container Div1 giữ một tiêu đề có nội dung "tiêu đề 1." Tiêu đề của Div thứ hai có nội dung "tiêu đề 2." Hai div này ngồi bên trong một div chính có ID là "chính".

   Thêm mã được hiển thị bên dưới sau khi mã được liệt kê trong bước trước:
   background-color: Blue; }

   Mã này tạo ra chức năng JavaScript Changezindex. Hàm đó chấp nhận bốn tham số mà nút nhấp vào truyền và thay đổi các giá trị chỉ số z của Div1 và Div2 cho các giá trị được truyền đến hàm. Vì nút Nhấp vào chuyển -1 dưới dạng giá trị của Div1 và 1 là giá trị của Div2, mã làm cho div2 xuất hiện trên đầu div1 khi nó chạy.

   Dán mã CSS sau vào phần của tài liệu:
   position: relative;
   background-color: Yellow; }

   chính {

   Vị trí: tương đối; Z-Chỉ số: 1; Chiều cao: 400px; Chiều rộng: 400px; màu nền: màu xanh; }
   position: absolute;
   height: 80px; width: 200px;
   top: 20px;
   left: 20px;
   background-color: Green;
   }

   Div1 {

4. Vị trí: Tuyệt đối; Z-Chỉ số: 1; Chiều cao: 80px; Chiều rộng: 200px; Vị trí: tương đối; Màu nền: Vàng; }

   Bước 2) Thêm CSS:

   Đứng đầu một

   Đứng đầu hai

   Mã này tạo ra hai container Div với giá trị ID của Div1 và Div2. Container Div1 giữ một tiêu đề có nội dung "tiêu đề 1." Tiêu đề của Div thứ hai có nội dung "tiêu đề 2." Hai div này ngồi bên trong một div chính có ID là "chính".

   Thêm mã được hiển thị bên dưới sau khi mã được liệt kê trong bước trước:

5. Lưu tài liệu của bạn và xem nó trong một trình duyệt. Bạn sẽ thấy màu vàng Div1, có văn bản là "Đứng đầu 1", nằm trên đỉnh của DIV màu xanh lá cây có văn bản là "Đỉnh 2." Nhấp vào nút để làm cho div2 xuất hiện trên đầu của div1.

Z là gì

Tại sao Z

Chúng ta có thể sử dụng gì thay vì z

Z như thế nào