Đang chuẩn bị liên kết để tải về tài liệu:
Creating Cool Web Sites with HTML, XHTML, and CSS apr phần 8

Tôi không biết về bạn, nhưng hình 12-9 mang lại cho tôi một chút đau đầu! Tin tốt là bạn có một vài cách khác nhau để giải quyết vấn đề container chồng chéo. Các giải pháp nhanh nhất là chỉ đơn giản là khôi phục lại màu nền để bạn không thể nhìn thấy văn bản của đoạn thứ hai, ví dụ sau đây hoàn thành: | 276 Creating Cool Web Sites with HTML XHTML and CSS I don t know about you but Figure 12-9 gives me a bit of a headache The good news is that you have a couple of different ways to address the overlapping container problem. The fastest solution is to simply restore the background color so that you can t see the text of the second paragraph which the following example accomplishes p style width 50 margin 10px background-color C9F position absolute top -6px left -6px border 1px solid padding 2px When the preceding code replaces the previous p tag and style attributes the result is as shown in Figure 12-10. You can see this is considerably easier on the eye. Figure 12-10 Specifying a background color hides the overlapping text problem. It s not a completely satisfying solution however because you still face the issue of the missing text. In this particular example the best solution is to use the float left CSS attribute. Experiment with it yourself and find what works best for you. Relative positioning Absolute positioning is absolute only within the parent container and most DHTML designers prefer relative positioning which they consider part of the normal flow of the document for layout. In the example in the preceding section switching from absolute to relative solves the overlap problem but in a somewhat inelegant manner leaving a big empty space to the right of the purple box as follows p style width 50 margin 10px background-color C9F position relative top -6px left -6px border 1px solid padding 2px Figure 12-11 shows the result of replacing the existing p tag style attribute with the values shown in the preceding code. Chapter 12 Advanced Cascading Style Sheets Figure 12-11 Relative positioning makes the container part of the regular document flow. In this case float left produces a more attractive result. So what s the point To see why the positioning of elements can prove so useful I need to change the perspective a bit. Instead of merely providing you with a