码迷,mamicode.com
首页 > 其他好文 > 详细

相对定位和绝对定位

时间:2017-07-09 18:16:29      阅读:138      评论:0      收藏:0      [点我收藏+]

标签:元素   左移   height   pos   exp   文档   表示   行内元素   fixed   

相对定位和绝对定位
相对定位:position:relative;
相对定位是让元素在当前位置上移动;
exp:
box{
position:relative;
left:20px;
top:30px;
}
表示让box元素从当前位置开始,向左移动20px;向下移动30px;
绝对定位:position:absolute;
绝对定位是让元素从浏览器的0 0点开始移动;
exp:
box{
position:absolute;
left:20px;
top:30px;
}
表示让元素从浏览器的0 0点开始,向左移动20px,向下移动30px;
注:绝对定位会脱离文档流,行内元素会被自动视为块级元素。
在编写网页时,有一些元素位置特殊,使用浮动难以将其放在对应位置时,可以使用浮动。在使用定位时,需要给元素的父级相对定位,再使用绝对定位给元素设定位置。
exp:
box{
width:200px;
height:200px;
position:relative;
}
box_1{
position:absolute;
left:20px;
top:20px;
}
这段代码就能让box_1这个元素从box元素的0 0点开始,向左下各移动20px;

另:若想让元素固定在某一位置则使用:position:fixed。

相对定位和绝对定位

标签:元素   左移   height   pos   exp   文档   表示   行内元素   fixed   

原文地址:http://www.cnblogs.com/baichuan147258/p/7141968.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!