定位:将盒子定在某一位置,自由的漂浮在其他盒子的上面。定位也是用来布局的,定位=定位模式+边偏移。
在CSS中,通过top、bottom、left和right属性定义元素的边偏移。
边偏移属性 | 示例 | 描述 |
top | top:80px | 顶端偏移量,定义元素相对于其父元素上边线的距离 |
bottom | bottom:80px | 底部偏移量,定义元素相对于其父元素下边线的距离 |
left | left:80px | 左侧偏移量,定义元素相对于其父元素左边线的距离 |
right | right:80px | 右侧偏移量,定义元素相对于其父元素右边线的距离 |
在css中,通过position属性定义元素的定位模式,语法如下:
选择器 {position:属性值}
属性值 | 语义 |
static | 静态定位 |
relative | 相对定位 |
absolute | 绝对定位 |
fixed | 固定定位 |
一、静态定位 static
元素默认定位方式,无定位的意思,不要定位的时候用。静态定位按标准流特性摆放位置,没有边偏移。
二、相对定位 relative
相对定位是元素相对于它原来在标准流中位置。相对定位的两个特点:1、相对于自己原来在标准流中位置来移动的;2、原来在标准流的区域继续占有,后面的盒子仍然以标准流的方式对待它。
三、绝对定位 absolute
绝对定位是元素以带有定位的父级元素来移动位置。如果父级没有定位(绝对、固定或相对定位),绝对定位子盒子以我们文档为准。如果父级(祖先)有定位(绝对、固定或相对定位),绝对定位子盒子以父级为准移动位置。绝对定位的特点:1)绝对是以带有定位的父级元素来移动位置的,如果父级都没有定位,则以浏览器文档为准移动位置;2)不保留原来的位置,完全是脱标的。
1、 父级元素没有定位
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>绝对定位</title>
<style>
.father{
width: 350px;
height: 350px;
background-color: pink;
margin: 100px;
}
.son{
width: 200px;
height: 200px;
background-color: purple;
position: absolute;
top: 50px;
left: 50px;
}
</style>
</head>
<body>
<div class="father">
<div class="son">
</div>
</div>
</body>
</html>
显示效果:
2、父级元素有定位
2.1、父级元素有定位
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>绝对定位</title>
<style>
.father{
width: 350px;
height: 350px;
background-color: pink;
margin: 100px;
position: relative;
}
.son{
width: 200px;
height: 200px;
background-color: purple;
position: absolute;
top: 50px;
left: 50px;
}
</style>
</head>
<body>
<div class="father">
<div class="son">
</div>
</div>
</body>
</html>
显示效果:
2.2、祖先有定位
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>绝对定位</title>
<style>
.grandfather{
width: 500px;
height: 500px;
background-color: skyblue;
position: relative;
}
.father{
width: 350px;
height: 350px;
background-color: pink;
margin: 100px;
}
.son{
width: 200px;
height: 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>
显示效果:
一般在实际开发中,我们采用的是"子绝父相"的模式,子级采用绝对定位,父级采用相对定位。
需要注意的是:绝对定位不能通过margin:auto 设置水平居中。可以通过:1、left:50% 让盒子的左侧移动到父级元素的水平中心位置;2、margin-left:width/2 让盒子向左移动"自身宽度的一半"。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>绝对定位</title>
<style>
div {
position: absolute;
left: 50%;
margin-left: -100px;
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
三、固定定位
固定定位是绝对定位的一种特殊形式,1)完全脱标,完全不占位置;2)只认浏览器可视窗口,浏览器可视窗口+边偏移属性 来设置元素的位置。跟父元素没有任何关系,单独使用,不随滚动条滚动。
四、堆叠顺序
在使用后定位布局的时候,可能会出现盒子重叠的情况,加了定位的盒子,默认后来者居上,后面的盒子会压住前面的盒子。应用z-index层叠等级属性可以调整盒子的堆叠顺序。z-index的特性:1)属性值,正整数、负整数或0,默认值是0,数值越大,盒子越靠上;2)如果属性值相同,则按照书写顺序,后来居上;3)z-index只能应用于相对定位、绝对定位和固定定位的元素,其他标准流、浮动和静态定位无效。
五、定位改变display属性
前面说过,display可以改变显示模式,使用float属性默认转换为行内块。这里,绝对定位和固定定位也和浮动类似,默认转换为行内块。需要注意的是:浮动元素、绝对定位元素都不会触发外边距合并的问题。