CSS样式之position定位
1.静态定位(static)
2.绝对定位(absolute)
3.相对定位(relative)
4.固定定位(fixed)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box {
height: 100px;
width: 100px;
background: red;
/*position定位:定位方向left || right || bottom || top
*
* static:静态定位,文档流,默认值
* */
position: static;
}
.after {
height: 200px;
width: 200px;
position: absolute;
right: 200px;
background: #808080;
}
.box1 {
height: 100px;
width: 100px;
background: green;
/* position定位
*
* absolute:绝对定位
* 特点:
* ★元素使用绝对定位之后不占据原来的位置(脱标)
* ★元素使用绝对定位,位置是从浏览器出发。
* ★嵌套的盒子,父盒子没有使用定位,子盒子绝对定位,子盒子位置是从浏览器出发。
* ★嵌套的盒子,父盒子使用定位,子盒子绝对定位,子盒子位置是从父元素位置出发。
* ★给行内元素使用绝对定位之后,转换为行内块。(不推荐使用,推荐使用display:inline-block;)
*
*/
position: absolute;
left: 20px;
}
.box2 {
width: 200px;
height: 200px;
background: darkgoldenrod;
/* position定位
*
* relative:相对定位
* 特点:
* ★使用相对定位,位置从自身出发。
* ★还占据原来的位置。
* ★子绝父相(父元素相对定位,子元素绝对定位)
* ★行内元素使用相对定位不能转行内块
*/
position: relative;
left: 30px;
}
.box3 {
width: 200px;
height: 200px;
background: #9ACD32;
}
.box4 {
/*
* 固定定位Position:fixed;
*
* 特点:
* ★固定定位之后,不占据原来的位置(脱标)
* ★元素使用固定定位之后,位置从浏览器出发。
* ★元素使用固定定位之后,会转化为行内块(不推荐,推荐使用display:inline-block;)
*/
position: fixed;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="after">
<div class="box1"></div>
</div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</body>
</html>