0714
相对定位
相对(比较安全)定位
position: relative;
a、不影响元素本身的特性;
b、不使元素脱离文档流(元素移动之后原始位置会被保留);
c、如果没有定位偏移量,对元素本身没有任何影响;
d、相对于其正常位置进行定位
不影响元素本身的特性( 元素的特性(类型):块元素,内联元素,内联块 )
位置移动之后,原来的位置会被保留(没有脱离文档流)
如果没有加上定位值,对元素本身没有任何影响
提升层级
left : 给定位元素加上一个左边的距离(相对原来自身的位置发生偏移)(可以给负值)
top : 给定位元素加上一个上边的距离(相对原来自身的位置发生偏移)(可以给负值)
层级: 后来居上
z-index : 层级
绝对定位
绝对定位
position:absolute;
a、使元素完全脱离文档流;
b、使内嵌支持宽高;
c、块属性标签内容撑开宽度;
d、如果有定位父级相对于定位父级发生偏移,没有定位父级相对于document发生偏移;
e、相对定位一般都是配合绝对定位元素使用;
f、提升层级
固定定位
position: fixed;
相对于可视区定位
全屏div
<style>
.box{
background-color: #0e3757;
position: absolute;
left:0;
right:0;
top:0;
bottom:0;
}
</style>
div居中
<style>
.box{
width:700px;
height:500px;
background-color: #0e3757;
position: absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
}
</style>
calc函数
width:calc(100% - 10px);(中间的空格不能省掉!!!)
1. 只支持 +-*/ (加减乘除)四个运算符
2. */(乘除的时候参与计算的值只能有一个带单位)
我们可以使用calc()以确定长度等width,height,margin,padding,font-size,等。为了测量,我们可以使用数学表达式:加法,减法,除法和乘法。