CSS style attributes word of the Left

Usually left alone in the CSS settings are invalid, you need to use in order to use position attributes take effect works. How much distance effect (how much distance left) on the left of the left.

left
left

A, left grammar and understanding

left translated : left, left
sometimes need to set left in the CSS selector code, set the target number from the box to the left, you need to set both position and then set the left were left to achieve the object needs.

1, for use
if provided separately for left box object is invalid, need to set the position: relative or position: absolute

2, grammar
left values may be positive values or negative values may be a percentage.
left: 10px
left: -20px
left:% 12 is
above the specific value is positive , negative , percentage value .

3, css left usage examples

.abc{left:10px;position:relative}或.abc{left:10px;position:absolute}

Set the object class = abc box left 10px

.abc{left:-10px;position:relative}或.abc{left:-10px;position:absolute}

Set the object class = abc box left -10px

.abc{left:10%;position:relative}或.abc{left:10%;position:absolute}

Set the object class = abc left cassette 10%

4, compatibility
compatible with all major browsers

Two, left small example

Here with the next position to use, look left role.
1, div css example code

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css left实例效果 ThinkCSS</title>
<style>
.box{ width:300px;height:300px; border:1px solid #00F}
.pr{ position:relative; border:1px solid #000; width:100px; height:50px}
.p1{left:10px;border:1px solid #F00}/* 红色盒子 */
.p2{left:30px;border:1px solid #0F0}/* 绿色盒子 */
.p3{left:60px;border:1px solid #0FF}/* 天蓝色盒子 */
.pwu{ left:10px; width:100px; height:50px;border:1px solid #F0F}/* 紫色盒子 */
</style>
</head>
<body>
<div class="box">
    <div class="pr p1">内容1</div>
    <div class="pr p2">内容2</div>
    <div class="pr p3">内容3</div>
    <div class=" pwu">未设置position</div>
</div>
</body>
</html>

2, the effect screenshots

Application examples left css

Summary: left position requires the use of attributes, used alone without using left lower position, will be ineffective.

left is to use the other as a style attribute value, but with different left here, this is a CSS attribute word.