Thêm một số CSS để đặt chỉ mục Z của văn bản lớn hơn hình ảnh
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:& 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;
}
/ * 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%];
}
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ó.
Thuộc tính chỉ số z chỉ định thứ tự ngăn xếp của một phần tử.Một phần tử có thứ tự ngăn xếp lớn hơn luôn ở phía trước một phần tử có thứ tự ngăn xếp thấp hơn.specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order.
Gần đây tôi đã học được rằng có thể thay đổi thứ tự xếp chồng của các yếu tố mà không cần sử dụng chỉ số z.Điều này có thể được thực hiện bằng cách sử dụng các thuộc tính CSS khác để tạo ra cái được gọi là bối cảnh sắp xếp mới.using other CSS properties to create what is called a new “stacking context”.
Thuộc tính chỉ số z xác định mức ngăn xếp của phần tử HTML.Cấp độ ngăn xếp của người Viking đề cập đến vị trí của phần tử trên trục Z [trái ngược với trục X hoặc trục Y].Giá trị cao hơn có nghĩa là phần tử sẽ gần với đỉnh của thứ tự xếp chồng.Thứ tự xếp chồng này chạy vuông góc với màn hình hoặc chế độ xem.determines the stack level of an HTML element. The “stack level” refers to the element's position on the Z axis [as opposed to the X axis or Y axis]. A higher value means the element will be closer to the top of the stacking order. This stacking order runs perpendicular to the display, or viewport.