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>
1710
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
