js布局详解(2020/09/19)

float

<style>
     .box1{
	     width:89px;
	     height:30px;
	     background-color:abfa;
	     float:right; //浮于父元素之上
</style>

设置float的box将脱离文档流,后续文档向前补充
在这里插入图片描述
如果不设置float两个box只能上下排,因为第一个有隐藏空间,当两个都设置float就可以横向排列。(块元素独占一行)
在这里插入图片描述
定位(position)

/*
static    无定位
relative  相对定位
absolute  绝对定位
fixed     固定定位
sticky    粘滞定位
*/

偏移量offset,与margin区别;自己移动不会影响其他元素。

包含块;正常情况下离此块最近的父辈块
      ;(本身)开启定位离他最近的开启定位的父辈元素
      如果都没开启,则相对于根元素定位
相对定位;刚开启不变动,类似于坐标运算,起始位置为“0”;层次变高
绝对定位;。。。脱离文档流,相对于包含块定位(父辈左上角)
固定定位;类似于绝对定位,但参考于浏览器视口(上下滚动,但它相对窗口不动)

元素的层级

z-index:值

相当于z轴,值越大层级越高

©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页