CSS相对定位和绝对定位详解
如果,说浮动, 关键在一个 “浮” 字上面, 那么 我们的定位,关键在于一个 “位” 上。
PS: 定位是我们CSS算是数一数二难点的了,但是,你务必要学好它,我们CSS离不开定位,特别是后面的js特效,天天和定位打交道。不要抵触它,反而要爱上它,它可以让我们工作更加轻松哦!
元素的定位属性
元素的定位属性主要包括定位模式和边偏移两部分。
1、边偏移
边偏移属性 | 描述 |
---|---|
top | 顶端偏移量,定义元素相对于其父元素上边线的距离 |
bottom | 底部偏移量,定义元素相对于其父元素下边线的距离 |
left | 左侧偏移量,定义元素相对于其父元素左边线的距离 |
right | 右侧偏移量,定义元素相对于其父元素右边线的距离 |
也就说,以后定位要和这边偏移搭配使用了, 比如 top: 100px; left: 30px; 等等
2、定位模式
在CSS中,position属性用于定义元素的定位模式,其基本语法格式如下:
选择器{position:属性值;}
position属性的常用值
值 | 描述 |
---|---|
static | 自动定位(默认定位方式) |
relative | 相对定位,相对于其原文档流的位置进行定位 |
absolute | 绝对定位,相对于其上一个已经定位的父元素进行定位 |
fixed | 固定定位,相对于浏览器窗口进行定位 |
相对定位relative(自私型)
相对定位是将元素相对于它在标准流中的位置进行定位,当position属性的取值为relative时,可以将元素定位于相对位置。
对元素设置相对定位后,可以通过边偏移属性改变元素的位置,但是它在文档流中的位置仍然保留。如下图所示,即是一个相对定位的效果展示:
注意: 相对定位最重要的一点是,它可以通过边偏移移动位置,但是原来的所占的位置,继续占有。
就是说,相对定位的盒子仍在标准流中,它后面的盒子仍以标准流方式对待它。
绝对定位absolute (拼爹型)
[注意] 如果文档可滚动,绝对定位元素会随着它滚动,因为元素最终会相对于正常流的某一部分定位。
当position属性的取值为absolute时,可以将元素的定位模式设置为绝对定位。
注意: 绝对定位最重要的一点是,它可以通过边偏移移动位置,但是它完全脱标,完全不占位置。
(1)父级没有定位
若所有父元素都没有定位,以浏览器为准对齐(document文档)。(2)父级有定位
绝对定位是将元素依据最近的已经定位(绝对、固定或相对定位)的父元素(祖先)进行定位。 (2)绝对定位的盒子没有边偏移
如果只是给盒子指定了 定位,但是没有给与边偏移,则改盒子以标准流来显示排序,和上一个盒子的底边对齐,但是不占有位置。
子绝父相(重点)
1、相对定位 不脱离标准文档流 占有位置
2、绝对定位 脱离标准文档流 不占有位置
首先, 我们说下, 绝对定位是将元素依据最近的已经定位绝对、固定或相对定位)的父元素(祖先)进行定位。
就是说, 子级是绝对定位,父亲只要是定位即可(不管父亲是绝对定位还是相对定位,甚至是固定定位都可以),就是说, 子绝父绝,子绝父相都是正确的。
所以,我们可以得出如下结论:
因为子级是绝对定位,不会占有位置, 可以放到父盒子里面的任何一个地方。
父盒子布局时,需要占有位置,因此父亲只能是 相对定位.
这就是子绝父相的由来。
定位案例(淘宝轮播图)
*{
margin: 0;
padding: 0; /*去除浏览器8px*/
}
ul{
list-style: none; /*去除 li 点的样式*/
}
.slider{ /*给轮播图套一个盒子*/
width: 520px;
height: 280px;
border: 1px solid #eee;
margin: 50px auto; /*上下相对于浏览器 50px 左右居中*/
position: relative; /*父级 相对定位*/
}
.arrow-l{
position: absolute; /*绝对定位*/
top: 50%;
margin-top: -12px; /*左箭头居中*/
}
.arrow-r{
position: absolute;
top: 50%;
right: 0; /*右侧偏移量,定义元素相对于其父元素右边线的距离*/
margin-top: -12px;
}
.circle{
width: 65px;
height: 13px;
background: rgba(255,255,255,.2);
position: absolute;
left: 50%;
margin-left: -32px;
bottom: 15px; /*底对齐*/
border-radius: 6px;
}
.circle li{
width: 9px;
height: 9px;
background-color: #b7b7b7;
float: left; /*浮动就是让多行元素 在一行显示*/
margin: 2px;
border-radius: 50%;
}
</style>
<div class="slider">
<img src="images/taobao.jpg" alt="">
<a href="">
<img src="images/left.png" class="arrow-l" alt="">
</a>
<a href="">
<img src="images/right.png" class="arrow-r" alt="">
</a>
<ul class="circle">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
效果图:
四种定位总结
定位模式 | 是否脱标占有位置 | 是否可以使用边偏移 | 移动位置基准 |
---|---|---|---|
静态static | 不脱标,正常模式 | 不可以 | 正常模式 |
相对定位relative | 不脱标,占有位置 | 可以 | 相对自身位置移动(自恋型) |
绝对定位absolute | 完全脱标,不占有位置 | 可以 | 相对于定位父级移动位置(拼爹型) |
固定定位fixed | 完全脱标,不占有位置 | 可以 | 相对于浏览器移动位置(认死理型) |
定位模式转换
跟 浮动一样, 元素添加了 绝对定位和固定定位之后, 元素模式也会发生转换, 都转换为 行内块模式,
** 比如 行内元素 如果添加了 绝对定位或者 固定定位后 浮动后,可以不用转换模式,直接给高度和宽度就可以了。**