[CSS参考手册](http://css.doyoe.com/)»[属性列表](#)»[定位属性](#)» 相关内容： [**其它定位属性参考**选择其它项](#) - [position](#) - [z-index](#) - [top](#) - [right](#) - [bottom](#) - [left](#) # left - **版本：CSS2** - 继承性：无 ### 语法： **left**: [<length>](#) | [<percentage>](#) | auto **默认值**：auto ### 取值： auto：无特殊定位，根据HTML定位规则在文档流中分配[<length>](#)：用长度值来定义距离左边的偏移量。可以为负值。[<percentage>](#)：用百分比来定义距离左边的偏移量。可以为负值。 ### 说明： **检索或设置对象与其最近一个定位的父对象左边相关的位置。** - 必须定义[position](#)属性值为absolute、relative或fixed，此取值方可生效。 - 对应的脚本特性为**left**。 ### 兼容性： <table class="gdataform"><ul class="support-type"><li><span class="support">浅绿</span> = 支持</li> <li><span class="unsupport">红色</span> = 不支持</li> <li><span class="partsupport">墨绿</span> = 部分支持</li> <li><span class="experimentsupport">橙色</span> = 实验性质</li> </ul><table class="gdataform"><thead><tr><th><a href="#browser" title="查看本文档测试时所用浏览器版本">支持版本</a>\类型</th> <th><span class="browser-ie">IE</span></th> <th><span class="browser-firefox">Firefox</span></th> <th><span class="browser-safari">Safari</span></th> <th><span class="browser-chrome">Chrome</span></th> <th><span class="browser-opera">Opera</span></th> </tr></thead><tbody><tr><th>版本</th> <td class="support">6.0</td> <td class="support">4.0</td> <td class="support">5.1</td> <td class="support">13.0</td> <td class="support">11.50</td> </tr></tbody></table><section id="example" class="gmodule gattr"><h2 class="tit">示例：</h2> <div class="cont"> <textarea cols="90" rows="10"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><meta charset="utf-8"/><title>left_CSS参考手册_web前端开发参考手册系列</title><meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com"/><meta name="copyright" content="www.doyoe.com"/><style><![CDATA[.test{position:absolute;left:-50px;width:200px;height:200px;padding:5px 10px;background:#c00;color:#fff;line-height:12;}]]></style><div class="test">我将出现在浏览器左上角</div> </textarea><p><input type="button" value="运行" class="gbtn btn-sure"/></p> </div> </section><aside id="ft"><div class="browser"><iframe id="bot-browser" frameborder="0" allowtransparency="true" src="../../global-browser.htm"/></div> <p class="copyright">Copyright © 2006-2012 <a href="http://www.doyoe.com/" rel="external" target="_blank">Doyoe</a>. All Rights Reserved</p></aside><script src="../../js/doyoe.js"/><script src="../../js/style.js"/></table>