定位模式
自动定位static
自动定位(默认定位方式)唯一的用处就是用来取消定位。
相对定位relative
相对定位,相对元素本身的位置进行定位,相对定位不脱离标准流,移动时以自己左上角为基点来移动的。
绝对定位absolute
绝对定位,相对于它上一个已经定位的祖先元素进行定位,如果所有祖先元素都没有定位就以当前屏幕进行定位。如果子元素想在父元素上定位而父元素不想挪动位置,那么就为父元素设置相对定位。(子绝父相)
固定定位fixed
固定定位,相对于浏览器窗口进行定位,脱离标准流
元素模式转换
加了绝对定位和固定定位之后元素模式也会跟着变化,和浮动一样,元素会转为行内块。(行内块的宽度和高度跟内容有关)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
* {
margin: 0;
padding: 0;
}
.left {
width: 100px;
height: 100px;
background-color: pink;
position: fixed;
top: 100px;
left: 20px;
}
.right {
height: 100px;
background-color: pink;
position: fixed;
top: 100px;
left: 300px;
} /*行元素转化为行内块元素,宽度为实际内容宽度,没有设定宽度*/
.top {
height: 80px;
background-color: skyblue;
position: absolute;
top: 20px;
left: 20px;
}/*行元素转化为行内块元素,宽度为实际内容宽度,没有设定宽度*/
</style>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
<div class="top"></div>
</body>
</html>
效果如下:
块元素right和top实际宽度为0,界面看不到效果,给他们分别添加width:200px;
,结果如下: