Absolute Positioning

Archives by Tag 'boxes'

The box model

At the top level the web page is a canvas—a container for other elements that have to be placed in it. It can be seen as a box, which has a specific dimension—x and y coordinate and a z-axis that flows away from the viewer into 3D space. Each element that is placed into the [...]

Absolute positioning

Absolute positioning takes its position from the top-lefthand corner of the browser pane with the x and y coordinates at (0,0). This positioning gives the designer tremendous control over the elements so positioned. The code for an absolutely positioned element can be placed anywhere in the code and still the element will display at the [...]

Fixed positioning

Fixed positioning is often regarded as a subset of absolute positioning. Like the containing boxes of absolutely positioned elements, the boxes of the fixed positioned elements are independent. However, the placement is different. Instead of localizing the element on the body of the page, the element is allowed to flow with the dimensions of the [...]

Style sheet and visual formatting models

The concept of the “visual formatting model” can be traced back to the intense need for ability to layout web pages in the way in which pages are laid out in printing. The model is extremely simple when compared to the complicated models of the printing world. Various CSS properties are used to control the [...]

Understanding the need for visual formatting model

CSS visual formatting model supposes that a document contains a number of boxes within boxes. A box can have a border and a background. The content of the box will be held in the center of the box and the area around it will be the padding. The margin is around the border of the [...]

Layouts and element positioning in visual formatting

All CSS positioning schemas such as float, relative, absolute, fixed, and static are applicable to the visual-formatting model. Normal flow in the visual formatting context can be with reference to the block or inline elements, but not both simultaneously. Block elements participate in a block-formatting context, and inline boxes participate in inline formatting context. In [...]

Floating window pages

Floating windows can be used when visual overlapping is considered advantageous and provides some depth to the application. A floating window floats in front of other windows because the z-index order placement is relative to that of the other windows. Floating windows are supported in Windows, Mac OS, and Linux. Floating windows help the designer [...]