您的位置:CSS5 > DIV CSS基础 >

 

css left right top bottom

 

DIV CSS left right top bottom定位

这四个CSS属性样式用于定位对象盒子,必须定义position属性值为absolute或者relative此取值方可生效。

一、语法结构

Left、right、top、bottom后跟数字+html单位

示范结构

div{left:20px}
div{right:20px}
div{top:20px}
div{bottom:20px}

Left 靠左距离多少
Right 靠右边距离多少
Top 距离顶部距离多少
Bottom距离下边距离多少

二、使用条件

通常单独使用left、right、top、bottom均无效,需要在使用绝对定位CSS position样式才能生效。

一般left和right在一个样式是只能使用其一,不能left和right都设置,要么使用left就不使用right,要么使用right就不使用left,如果left和right均使用将会出现兼容问题,一个对象设置了靠左left多少距离,自然右边距离自然就有了所以无需设置左边。

相同道理,top和bottom对一个对象只能使用其一,不然会出现逻辑兼容问题。譬如一个人让你往左走,一个人让你往右走,同时发出往左往右走这个时候你也不好判断往那边走。

三、绝对定位中使用

一般left、right、top、bottom使用于配合position定位对象位置。大家可以进入CSS position教程篇了解学习这些样式属性。

扩展阅读:
Position:absolute
Position:relative

标签(Tag): 定位
本文分享URL地址:http://css5.com.cn/css/404.shtml

更多

上一页: 上一篇:position css绝对定位
下一页: 下一篇:overflow(visible auto hidden scroll)教程

 

CSS必备基础教程 - TOP

 

热门信息

 

CSS5更新 - TOP

 

 

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解。
CSS教程文章修订日期::2013-02-13     点击:
原创:CSS5     来源网址:http://css5.com.cn/css/404.shtml
本文css5.com.cn(DIV CSS) CSS5版权所有,欢迎转载,并注明出处来源及URL!