前面说过浮动,关键在一个"“浮”上面,而定位,关键则在于一个"位"上面。
前端学习之浮动
PS:定位在CSS中算是数一数二的难点,但是,务必要学好它。我们的CSS离不开定位,特别是后面的js特效,天天和定位打交道。不要抵触定位,反而要爱上它,它可以让我们工作更加轻松哦~
为什么要用定位?
如果要实现某个东西能够随便在一个盒子里自由随意移动、或压着某个元素、或超出某个盒子等等,这一类用标准流或者浮动,实现会比较复杂或者难以实现,此时我们用定位来做,just soso~
元素的定位属性
元素的定位属性主要包括定位模式和边偏移两部分。
- 边偏移(即告诉盒子要往哪边走,上下左右)
边偏移属性 | 描述 |
---|---|
top | 顶端偏移量,定位元素相对于其父元素上边线的距离 |
bottom | 底部偏移量,定位元素相对于其父元素下边线的距离 |
left | 左侧偏移量,定位元素相对于其父元素左边线的距离 |
right | 右侧偏移量,定位元素相对于其父元素右边线的距离 |
也就是说,以后定位要和这边偏移搭配使用。比如,top:100px;left;100px;等等
- 定位模式(定位的分类)
在CSS中。position属性用于定义元素的定位模式,其基本语法如下:
选择器{position:属性值;}
position属性的常用值
值 | 描述 |
---|---|
static | 自动定位(默认定位方式) |
relative | 相对定位,相对于其原文档流的位置进行定位 |
absolute | 绝对定位,相对于其上一个已经定位的父元素进行定位 |
fixed | 固定定位,相对于浏览器窗口进行定位 |
静态定位(static)–默认
静态定位是所有元素默认的定位方式,当position属性的取值为static时,可以将元素定位为静态位置。所谓的静态位置就是各个元素在html文档流中默认的位置。
即网页中所有元素都默认的是静态定位哦~ 其实就是标准流的特性。
在静态定位状态下,无法用过边偏移属性(left、right、top、bottom)来改变元素的位置
√静态定位唯一的用处:取消定位
相对定位(relative)–自恋型即以自己为中心
相对定位是将元素相对于它在标准流中的位置进行定位,当position属性的取值为relative时,可以将元素定位于相对位置中。
对元素设置相对定位后,可以通过边偏移属性改变元素的位置,但是它在文档流中的位置仍然保留。如下图所示,即是一个相对定位的效果展示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 200px;
height: 200px;
background-color: pink;
}
.top{
/*margin:100px;*/
position: relative;
top:100px;
left: 100px;
}
.bottom{
background-color: purple;
}
</style>
</head>
<body>
<div class="top"></div>
<div class="bottom"></div>
</body>
</html>
注意:
1.相对定位最重要的一点:它可以通过边偏移移动位置,但是原来所占位置,继续占有。
2.其次,每次移动的位置,是以自己的左上角为基准点(相对于自己来移动)
就是说,相对定位的盒子仍在标准流中,它后面的盒子仍以标准流的方式对待它。(相对位置不脱标)
如果说浮动的主要目的是 让多个块级元素一行显示,那么定位的主要价值就是移动位置,让盒子到我们想要的位置上去。
绝对定位(absolute)–拼爹型
如果文档可以滚动,绝对定位元素会随着它滚动,因为元素最终会相对于正常流的某一部分定位。
当position属性的值为absolute时,可以将元素的定位模式设置为绝对定位。
注意:绝对定位最重要的一点是,它可以通过边偏移移动位置,但是它完全脱标,完全不占位置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
height: 2000px;
}
div{
width: 200px;
height: 200px;
background-color: pink;
}
.top{
position: absolute;
right: 0;
bottom: 0;
}
.bottom{
width: 260px;
background-color: purple;
}
</style>
</head>
<body>
<div class="top"></div>
<div class="bottom"></div>
</body>
</html>
绝对定位的对齐准则分为两种:父元素无定位和父元素有定位的情况下,对齐方式不一样。
父亲没有定位
若所有父元素都没有定位,则以浏览器当前屏幕为准对齐如下图;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.father{
width: 500px;
height: 500px;
background-color: pink;
margin:100px;
}
.son{
height: 200px;
width: 200px;
background-color: purple;
position: absolute;
top: 50px;
left: 50px;
/* 若所有父元素都没有定位,则以浏览器当前屏幕为准对齐 */
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
父亲有定位
如果父亲有定位,那么绝对定位将元素依据最近的已经定位(绝对、固定或相对定位)的父元素(祖先)为准进行定位。
只有一个父元素的嵌套的情况 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.father{
width: 500px;
height: 500px;
background-color: pink;
margin:100px;
position: absolute;
}
.son{
height: 200px;
width: 200px;
background-color: purple;
position: absolute;
top: 50px;
left: 50px;
/* 若所有父元素都没有定位,则以浏览器当前屏幕为准对齐 */
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
多重嵌套的情况下父元素有无定位可详细分为以下四种:
祖父和父亲都没有定位的情况下:子元素以浏览器当前屏幕为基准定位
祖父有定位而父亲没有定位的情况下:子元素以祖父为基准定位
祖父没有定位而父亲有定位的情况下:子元素以父亲为基准定位
祖父和父亲都有定位的情况下:子元素以父亲为基准定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.grandfather{
margin:100px;
width: 800px;
height: 800px;
background-color: skyblue;
border: 1px solid skyblue;
position: absolute;
}
.father{
width: 500px;
height: 500px;
background-color: pink;
margin:100px;
position: absolute;
}
.son{
height: 200px;
width: 200px;
background-color: purple;
position: absolute;
top: 50px;
left: 50px;
/* 若所有父元素都没有定位,则以浏览器当前屏幕为准对齐 */
}
</style>
</head>
<body>
<div class="grandfather">
<div class="father">
<div class="son"></div>
</div>
</div>
</body>
</html>
注意:绝对定位的子元素取最近的定位父元素为准进行定位
子绝父相
意思是 子级是绝对定位的话,父亲要用相对定位。
首先,我们说下,绝对定位是将元素依据最近的已经(定位、固定、或者相对定位)的父元素(祖先)进行定位。
也就是说,子级是绝对定位,父亲只要是定位即可(不管父亲是绝对定位、相对定位,甚至是固定定位都可以)。即子绝父绝,子绝父相都是正确的。
绝对定位是完整意义上的脱标
标准流如下图:
给aaa盒子浮动之后:会发现文字还是在下面一行显示,而不是被压在aaa下面
给aaa盒子绝对定位之后:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 200px;
height: 200px;
background-color: pink;
}
.aaa{
position: absolute;
}
.bbb{
width: 450px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="aaa">aaaaaaaaaaa</div>
<div class="bbb">bbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
</body>
</html>
定位的盒子居中对齐
正常情况下,让一个盒子居中,通常只需要给个width,然后设置margin:0 auto;就能左右居中对齐。
但是当一个盒子设置浮动(float)或者绝对定位(position:absolute)时,此时margin:0 auto就不管用了。
定位的盒子也可以水平或垂直居中,有一个算法:
1.首先left: 50%----父盒子的一半大小;
2.然后走(外边距)自己负的一半值就可以了[margin-left:-xxpx(自己宽度值的一半)或者transform: translateX(-50%)]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 300px;
height: 200px;
background-color: skyblue;
margin:199px auto;
position: absolute;
left: 50%;
margin-left: -150px;
/*transform: translateX(-50%);*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>
固定定位(fixed)–认死理型
固定定位是绝对定位的一种特殊形式,类似于正方形是一种特殊的矩形。它以浏览器窗口作为参照物定位网页元素。当position属性取值为fixed时,即可将元素的定位设置为固定定位。
当对元素设置固定定位后,它将脱离标准文档流的控制,始终依据浏览器窗口来定位自己的显示位置。不管浏览器滚动条如何滚动也不管浏览器大小如果变化,该元素都会显示在浏览器窗口的固定位置。
固定定位有两点:
- 固定定位的元素和父元素没有任何关系,只认浏览器;
- 固定定位的元素完全脱标,不占位置,不随着滚动条滚动而滚动;
- IE6等低版本浏览器不支持固定定位。
定位模式转换
跟浮动一样,元素添加了绝对定位和固定定位之后,元素模式也会发生转换,都会转为行内块模式
行内块的宽度和高度和内容有关
因此,比如行内元素 如果添加了绝对定位或固定定位或浮动后,可以不用转换模式,直接给高度和宽度就可以了 。