1. Technologies for web publishing Ing. Václav Freylich Lecture 7

2. aTNPW1-7 Content  CSS positioning Box model Absolute positioning Floating elements

3. aTNPW1-7 Box model Text Text Text Text Text Text Text Text Text Text Margin PaddingBorder width

4. aTNPW1-7 Absolute positioning Allows to set an object's placement on a page by setting its offset position from the left, right, top, and bottom margins The box is out of the normal flow of the page Property z-index Sets the stack order of an element. An element with greater stack order is always in front of another element with lower stack order. z-index can have also the negative value

5. aTNPW1-7 Absolute positioning Absolute positioning example: #absolute_box { position: absolute; left: 30px; top: 50px; width: 100px; height: 70px; } 30px 50px 100px 70px

6. aTNPW1-7 Floating elements Floating boxes are shifted to the left or right side of the current line. Content boxes that follow in HTML code are rendered along (around) the floated element Floating boxes need to have assigned width value.

7. aTNPW1-7 Floating elements Using floatied boxes (example): #floating_box { float: left; width: 50px; height: 50px; } In HTML code the following order of elements is essential: 1) Floating box (red) 2) Normal box (blue)