1. 定位
使用了定位的元素，理论上能够使元素在页面中任意位置得到展示。值得注意的是，定位只能针对块元素来做。
定位属性通过position实现。指定了定位的元素结合left,right,top,bottom4个方向设置坐标。
- static，默认值，元素没有定位
- relative，相对定位
- absolute，绝对定位
- fixed，固定定位
1.2static
元素没有定位；根据标准文档流，元素按照从上到下，从左往右的方式一次排列。
1.3 相对定位
相对于其在标准文档流中的位置进行定位。
position:relative;
/*
原点，相对定位的元素的原点是按照标准文档流的位置来指定的
*/
left:0;
top:0;
1.4 绝对定位
绝对定位的元素会脱离标准文档流。通过left,right,bottom,top四个方向控制其在页面中的位置。
绝对定位的元素的原点：离绝对定位的元素的父级中最近的一个使用了定位（相对定位和绝对定位）的元素进行定位，如果所有的父级标签都没有定位过，则参考html标签定位。
.box{
}
.box div{ /*观察绝对定位的0点在哪里*/
position:absolute;
top:0;
left:0;
}
父级容器使用了相对定位
.box{
position:relative;
}
.box div{ /*观察绝对定位的0点在哪里*/
position:absolute;
top:0;
left:0;
}
1.5固定定位
在页面中的某个位置固定元素，在页面存在滚动条的情况下，固定定位的元素会随着滚动条滚动而滚动。
.box{
position:fixed;
}
<!--导入字体图标css-->
<link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.css"/>
<style>
.aside{
width: 100px;
height: 100px;
background-color: #5EA593;
position: fixed;
right: 0;
top: 50%;
margin-top: -50px;
cursor: pointer;
}
.aside .close{
position: absolute;
right: 10px;
top: 0;
}
.close:hover{
color: red;
}
</style>
</head>
<body style="height: 3000px;">
<div class="aside">
<img src="https://img14.360buyimg.com/img/s100x100_jfs/t1/112085/11/7692/103807/5ec5e741Ea06e112d/d432bb5f8d55cd59.jpg!cc_100x100.webp">
<i class="close fa fa-times" aria-hidden="true"></i>
</div>
</body>
8167
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
