Đang chuẩn bị nút TẢI XUỐNG, xin hãy chờ
Tải xuống
Practical prototype and scipt.aculo.us part 36: The information in this book is distributed on an "as is" basis, without warranty Although every pre-caution has been taken in the preparation of this work, neither the author(s) nor Apress shall have any liability to any person or entity with respect to any loss or damage caused or alleged to be caused directly or indirectly by the information contained in this work. | 204 CHAPTER 9 WHAT YOU SHOULD KNOW ABOUT DHTML AND SCRIPT.ACULO.US box position relative width 600px height 300px background-color ddd top 50px left 25px Figure 9-9. A relatively positioned element This example means to say Render the element as you would normally except place it 50 pixels lower and 25 pixels to the right. Figure 9-10 shows the difference when compared to static positioning. CHAPTER 9 WHAT YOU SHOULD KNOW ABOUT DHTML AND SCRIPT.ACULO.US 205 Figure 9-10. The same element but with static positioning Offset Parents and Positioning Context There s one final wrinkle. Elements can be placed relative to the document as a whole but they can also be placed relative to any other element. We ll call this the element s positioning context. It alters the meaning of CSS properties like top. We can see for ourselves how changing the positioning mode of an element affects how that element s children are rendered see Figure 9-11 -- HTML -- div id box div id box2 div div 206 CHAPTER 9 WHAT YOU SHOULD KNOW ABOUT DHTML AND SCRIPT.ACULO.US CSS box width 300px height 300px position static background-color ddd box2 width 100px height 100px position absolute bottom 15px right 15px background-color 333 Figure 9-11. The black box positions itself in the context of the entire .
