定位
定位:通过定位可以将元素摆放在页面中任意位置
语法:position属性设置元素的定位
可选值:static:默认值,开启定位
relative开启相对定位
absolute开启绝对定位
fixed开启固定定位
相对定位:当元素设置position:relative;开启元素的相对定位
1 开启相对定位,元素不会发生任何变化
2 开启相对定位后,元素不会脱离文档流
3 相对定位的元素,是相对于其在文档流中的位置进行定位的
4 相对定位会使元素提升一个层级(可以遮盖其他块)
5 相对定位不会改变元素的性质,块还是块,行内还是行内
当元素开启定位后,可以通过四个方向的偏移量(offset)来控制元素的位置:
top:元素与其定位位置的顶部距离
bottom:元素与其定位位置的底部距离
left:元素与其定位位置的左侧距离
right:元素与其定位位置的右侧距离
绝对定位:(难点:参照物??)当元素设置position:absolute;开启元素的绝对定位
1 绝对定位会完全脱离文档流
2 绝对定位会改变元素的性质,行内变块,块宽高被内容撑开
3 开启绝对定位后若不设置偏移量,元素的位置不发生变化,位置还在那里
4 绝对定位会相对于离它最近的开启了定位的祖先元素进行定位
5 绝对定位会使元素提升一个层级(层级优先级:文档流<浮动<定位)
<div class=’box1’>
<div class=’box2’>
<div class=’box3’></div></div>
</div>
定位时的参照物:
若box2设置absolute,box3与box2原点对齐;若box2未开,box1开,与box1对齐;否则与body对齐
若所有祖先元素都未开启绝对定位,则相对于HTML标签进行定位
一般情况,我们为一个元素开启绝对定位,会同时为它的父辈元素开启相对定位
绝对定位元素会相对于它的包含块进行定位
包含块:
对于绝对定位元素来说,包含块就是离它最近的开启定位的块元素
若没有开启定位的祖先元素,则其包含块是网页中的初始包含块(html为初始包含块)
开启绝对定位后,布局的公式新加入四个属性:
水平方向:
left+margin-left+border-left+padding-left+width+padding-right+border-right+margin-right+right=包含块的宽度
绝对定位元素水平方向布局的等式:auto+auto+0+0+200px+0+0+auto+auto=500px
垂直方向:
top+margin-top+border-top+padding-top+height+padding-bottom+border-bottom+margin-bottom+bottom=包含块的高度
此时有五个值可设置为auto:left/right/margin-left/margin-right/width
在包含块中居中:
left:0;
right:0;
margin:0 auto;
全部居中(上下左右)
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
Margin:auto;
固定定位:当元素设置position:fixed;开启元素的绝对定位
特点与绝对定位一样,不同点:相对于浏览器的窗口(视口)进行定位
粘滞定位:电话部:王,李---粘滞其姓
.l1{
position:sticky; 将l1标签的内容黏贴
top:0;
background-color:#bfa;
}
.l1{ 将l2标签的内容黏贴
position:sticky;
top:20px;
background-color:#bfa;
}
层级:开启定位元素会提升一个层级,定位元素层级可以同z-index来设置,z-index需要一个整数作为参数,值越大层级越高
父元素的层级再高,也不会盖住子元素;
若z-index的值相等,则后面元素会盖住前边元素;使用z-index时,需要开启 定位;
position:relative;
z-index:n;
设置不透明颜色度:方法一:opacity:0-1;(不,完全透)------0.5:半透明 元素整个透明(文字)
方法二:rgba(0,0,0,0.5) 只是颜色透明