The introduction and example of CSS left right top bottom positioning

These four CSS property styles are used to locate the object box, and you must define the Position property value to absolute or relative this value to take effect.

First, the grammatical structure

Left, right, top, bottom followed by the number +html units.

Model structure

div{left:20px}

div{right:20px}

div{top:20px}

div{bottom:20px}

What is the left distance?

Right, what's the distance?

What is the top distance?

Bottom distance from bottom

Ii. Conditions of Use

Normally using left, right, top, bottom are not valid, and you need to use the absolute position CSS position style to take effect.

Generally left and right in a style can only be used in one, can not be set to left, and you do not have to use leave, or you use it to leave with right, or if you are using it, the compatibility problem will occur. An object is set to the left side of how much distance, natural right distance is naturally there is no need to set the left.

In the same way, top and bottom can only use one for an object, or there will be a logical compatibility problem. For example, a person let you go to the left, a person to let you go to the right, at the same time issued to the left to the right to walk this time you are not good to judge go that way.

Third, absolute positioning in use

The general left, right, top, and bottom are used to position objects with position. You can learn about these styling properties by going to the CSS position tutorial article.

Instance:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">