CSS Box mode detailed four

Objective

In the use of CSS control typesetting process, positioning has been regarded as a difficult, this is mainly performance for many users in the absence of in-depth understanding of the principle of positioning, the row out of the messy pages often let them at a loss, while the other side some experts often rely on the positioning of the powerful function to make some cool effects, such as CSS albums and so on , so their messy web page and master perfect design to form a sharp contrast, this to a certain extent, hit the beginner positioning of netizens, but also in their minds to form such a thought: when I skillfully play the CSS positioning, I have been a master. No matter what you think, I just hope the following tutorial will give you a deeper understanding of CSS positioning properties.

Read suggestions

Let me start by talking about this tutorial, which is very helpful to you before you actually start reading the tutorials. My idea is this: first give the positioning of the more professional refinement of the explanation, and then use the method of playing like the image of the introduction of them, at this time we have to talk about the professional interpretation of the comparison reading. The introduction of the theory, will be through an example to introduce the positioning of the various knowledge points, although the case is not beautiful, but each instance is carefully selected, if you want to fully grasp the CSS positioning method, you must understand the principle of each instance. Finally, we're going to take you to a cool, comprehensive example. If you want to improve your interest or motivation to read this article, you can jump to the end to see how the composite instance works.

1. Professional interpretation of positioning

(1) Grammar

position:static | Absolute | Fixed | Relative

(2) Description

From the above syntax, we can see that there are many kinds of methods of localization, they are static, absolute positioning (absolute), fixation (fixed), relative positioning (relative). In this tutorial, I do not talk about one, only the most commonly used and most practical two positioning methods: absolute positioning (absolute), relative positioning (relative).

Absolute positioning (absolute): Drag the object assigned to this location method from the document stream, using attributes such as left,right,top, bottom, to be absolutely positioned relative to its closest parent object, if the object's parent does not have a positioning attribute set, That is, or follow the HTML positioning rules, based on the upper left corner of the body object as a reference to locate. Absolute anchored objects can cascade, cascading orders can be controlled by the Z-index property, the Z-index value is an integer with no units, the large is at the top, and there can be negative values (currently negative FF does not support).

[1] [2] [3] [4] [5] [6] Next page