一、定位的简介
1.定位的作用
- 定位用来解决元素的排列(摆放)问题
使用定位可以将元素随心所欲的摆放到任意位置
2.有哪些定位
1)默认的定位
- 块元素垂直排列
- 行内元素水平排列
- 这种默认的排列方式称之为流定位
流:元素有序的排列的队伍
2)特殊的定位
- 浮动定位:可以让块左右排列
- 相对定位:相对于自身产生很小的偏移
- 绝对定位:相对于父亲产生很大的偏移
- 固定定位:相对于窗口产生很大的偏移
后3种定位本质一样,都是相对于某目标产生偏移
二、浮动定位
浮动:让块左右排列
1.区别和联系:
相同点:设置偏移量的方式一样
语法: left:10px;
规律:向中心方向偏移为正,反方向偏移为负
不同点:设置偏移量的参考对象不一样
1) 相对定位:以自己原来的位置为目标,元素不脱离流(位置不释放) (图片抖动)
代码:
position: relative;
left: 2px;
right: -2px;
li:hover {
position: relative;
left: 2px;
right: -2px;
}
2) 绝对定位: (将一个元素覆盖到另一个元素上)
-以带有position的父辈为目标
-都有position则采用就近原则
-都没有position则以body为目标
-元素脱离流(释放位置)
步骤:在父辈上加position->设置定位 position:absolute
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Demo03</title>
<style>
div {
width: 318px;
height: 318px;
border: 3px solid red;
/*不设置偏移量,只是为了便于子元素以此为目标做绝对定位 */
position: relative;
}
p {
position: absolute;
left: 0;
bottom: 10px;
width: 318px;
background: #FFF;
text-align: center;
}
</style>
</head>
<body>
<div>
<img src="../images/3.jpg"/>
<p>郁郁葱葱【】【】【】</p>
</div>
</body>
</html>
3)固定定位:
-以浏览器的窗口为目标
-永远挂在窗口的固定位置不动
-元素脱离流(释放位置)
代码:position:fixed;
<style>
div {
border: 1px solid #ccc;
width: 50px;
text-align: center;
position: fixed;
bottom: 10px;
right: 5px;
}
</style>
<body>
<h1>罗技鼠标</h1>
<p>very good</p>
<p>xxxxxxxxxxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxxxxxxxxxx</p>
<div>
<!-- 顶部锚点:# -->
<a href="#">TOP</a>
</div>
</body>
四、如何选择定位方式
排除法:1.固定定位 2.浮动定位 3.相对定位(偏移量小) 4.绝对定位(应用率高)
例子:“操作成功” 移动到中间位置
1.设置div
<!-- 提示(消息区) -->
<div class="message">
<img src="../img/close.png"/>
<p>操作成功</p>
</div>
2.设置父元素(添加position)
.content {
position: relative;
}
3.设置message为绝对定位
/*派生,使优先级变高*/
.content .message {
position: absolute;
left: 200px;
top: 100px;
width: 450px;
height: 100px;
}
4.设置图片为右浮动、外边距
.message img {
float: right;
margin: 5px;
}
5.改变“操作成功”的位置
.message p {
margin-left: 38px;/*外边距*/
line-height: 100px;/*行高*/
}
6.改整个框的边框,背景色等
.content .message {
border: 1px solid #F68A8A;
background: #FDECEC url(../img/ok.png) no-repeat 10px 42.5px;
}
7.靠近图片添加手型
/*图标变手型*/
.message img:hover {
cursor: pointer;
}