1. 定位
使用了定位的元素,理论上能够使元素在页面中任意位置得到展示。值得注意的是,定位只能针对块元素来做。
定位属性通过position
实现。指定了定位的元素结合left,right,top,bottom
4个方向设置坐标。
- 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>