TAILIEUCHUNG - Learning Web Design Third Edition- P33

Learning Web Design Third Edition- P33:Everything you need to know to create professional web sites is right here. Learning Web Design starts from the beginning defining how the Web and web pages work and builds from there. By the end of the book, you'll have the skills to create multi-column CSS layouts with optimized graphic files, and you'll know how to get your pages up on the Web. | Absolute Positioning Stacking order Before we close the book on absolute positioning there is one last related concept that I need to introduce. As we ve seen absolutely positioned elements overlap other elements so it follows that multiple positioned elements have the potential to stack up on one another. By default elements stack up in the order in which they appear in the document but you can change the stacking order with the z-index property. Picture the z-axis as a line that runs perpendicular to the page as though from the tip of your nose through this page and out the other side. z-index Values number auto inherit Default auto Applies to positioned elements Inherits no The value of the z-index property is a number positive or negative . The higher the number the higher the element will appear in the stack. Lower numbers and negative values move the element lower in the stack. Let s look at an example to make this clear Figure 15-19 . Here are three paragraph elements each containing a letter image A B and C respectively that have been positioned in a way that they overlap on the page. By default paragraph C would appear on top because it appears last in the source. However by assigning higher z-index values to paragraphs A and B we can force them to stack in our preferred order. Note that the values of z-index do not need to be sequential and they do not relate to anything in particular. All that matters is that higher number values position the element higher in the stack. The markup p id A img src alt A p p id B img src alt B p p id C img src alt C p The style sheet A z-index 10 position absolute top 200px left 200px B z-index 5 position absolute top 225px left 175px 306 Part III CSS for Presentation Fixed Positioning C z-index 1 position absolute top 250px left 225px top of lower values. Figure 15-19. Changing the stacking order with the z-index property. To be honest the z-index property is not often required for most page layouts but

• Đồ họa - Thiết kế - Flash
• thiết kế web
• vẽ layout
• giáo trình css
• kĩ thuật cắt html
• giáo trình photoshop
• Thiết kế trang web
• hướng dẫn Thiết kế trang web
• kinh nghiệm Thiết kế trang web
• tài liệu Thiết kế trang web
• cẩm nang Thiết kế trang web
• kỹ thuật Thiết kế trang web
• Bài giảng Thiết kế Web
• Đại cương Thiết kế Web
• Tổng quan Thiết kế Web
• Môn học Thiết kế Web
• Mục tiêu Thiết kế Web
• Giáo trình Thiết kế giao diện web
• Thiết kế và quản lý website
• Thiết kế giao diện web
• Nhận dạng các trang web
• Cấu trúc trang web
• phương pháp thiết kế trang Web
• kỹ thuật thiết kế Web
• thiết kế web nhanh
• thực hành thiết kế web
• thiết kế web đẹp
• tài liệu về thiết kế web
• thủ thuật thiết kế web
• mẹo dùng web
• học thiết kế web
• Thiết kế web động
• tài liệu Thiết kế web động
• hướng dẫn Thiết kế web động
• kinh nghiệm Thiết kế web động
• cẩm nang Thiết kế web động