CSS学习笔记9-定位(position)
定位-position
position的含义指定位,position 属性指定了元素的定位类型(static、relative、fixed、absolute 或 sticky)。
元素其实是使用 top、bottom、left 和 right 属性定位的。但在使用这几个属性之前,需要先设置 position 属性。根据不同的 position 值,它们的工作方式也不同。
静态定位-static
使用方式:
position: static;
静态定位的元素不会受到 top, bottom, left, right影响。
相对定位-relative
相对定位是相对自身原来的位置进行偏移,可使用 top、bottom、left 和 right。
注意
top:10px;
是相对上边偏移了10px,即向下偏移10px,而不是向上偏移10px,其余同理。
代码演示
首先通过浮动在一个大盒子中并排放置三个小盒子,代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>相对定位</title>
<style type="text/css">
.b1{
width: 200px;
height: 100px;
background: green;
float: left;
margin-left: 20px;
margin-top: 20px;
border: 2px grey solid;
}
.b2{
width: 200px;
height: 100px;
background: yellow;
float: left;
margin-left: 20px;
margin-top: 20px;
border: 2px grey solid;
}
.b3{
width: 200px;
height: 100px;
background: blue;
float: left;
margin-left: 20px;
margin-top: 20px;
border: 2px grey solid;
}
.box{
width: 690px;
height: 140px;
border: 5px grey dashed;
}
</style>
</head>
<body>
<center>
<div class="box">
<div class="b1"></div>
<div class="b2"></div>
<div class="b3"></div>
</div>
</center>
</body>
</html>
显示效果如下:
然后在中间小盒子的样式 .b2{…} 中加入如下代码:
position: relative;
left:80px;
top:20px;
显示效果如下:
绝对定位-absolute
绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,会以浏览器窗口为基准进行定位。
代码演示
实现下图的效果,并且当鼠标移动到小方块时,小方块颜色会改变。
要求:使用绝对定位,不允许使用浮动。
代码实现如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绝对定位</title>
<style type="text/css">
.box{
width: 320px;
height: 320px;
border: solid 2px grey;
/*作用是让大盒子有了定位属性,让小盒子以大盒子为基准进行绝对定位*/
position: relative;
}
.b1{
width:100px;
height: 100px;
background:green;
}
/*设置伪类样式,用于鼠标悬浮的特效*/
.b1:hover{
/*设置阴影*/
box-shadow: 20px 10px 5px;
/*设置背景颜色*/
background: red;
}
</style>
</head>
<body>
<center>
<div class="box">
<div class="b1" style="position: absolute;left: 10px;top: 10px;"></div>
<div class="b1" style="position: absolute;right: 10px;top: 10px;"></div>
<div class="b1" style="position: absolute;left: 110px;top: 110px;"></div>
<div class="b1" style="position: absolute;left: 10px;bottom: 10px;"></div>
<div class="b1" style="position: absolute;right: 10px;bottom: 10px;"></div>
</div>
</center>
</body>
</html>
显示效果如下:
鼠标悬停时,小盒子的效果如下: