tailieunhanh - CSS Cookbook- P6

Tham khảo tài liệu 'css cookbook- p6', công nghệ thông tin, kỹ thuật lập trình phục vụ nhu cầu học tập, nghiên cứu và làm việc hiệu quả | height 123px z-index 2 left 264px top 0 water position absolute width 315px height 323px z-index 1 left 359px top -20px The left and top properties indicate the placement of the images within their nearest positioned ancestor element or the initial containing block. In this case it s the initial containing block to the div elements. Furthermore the body element s margin has a value of 0 meaning that the origin point is in the upper-left corner of the browser s viewport. body margin 0 Even though this method works if the web document is later modified exact positioning becomes a design liability. For example adding a simple headline above the images in the HTML results in the anomaly shown in Figure 4-27 h2 Kids Welcome New Boat h2 img src width 360 height 304 alt kids playing div id boat img src width 207 height 123 alt boat div div id water img src width 315 height 323 alt landscape div Figure 4-27. Presentation breaks with addition of heading Combining Different Image Formats 225 Please purchase PDF Split-Merge on to remove this watermark. Because the image of the children has not been positioned with absolute it moves down the flow of the document. The other image stays in place because it has been positioned within the initial containing block and is still in the same place it was before the headline was added. By using the background-positioning method within block-level elements you can create a self-contained module. Then when content is added to and removed from the web page the presentation remains whole as seen in Figure 4-28 and shown in the following code DOCTYPE html PUBLIC - W3C DTD XHTML Transitional EN http TR xhtml1 DTD html xmlns http 1999 xhtml head title CSS Cookbook title style type text css body margin 5 10 0 10 content background-image url background-repeat no-repeat background-position bottom right height 400px width 674px h2