CSS定位
CSS布局和定位有什么区别?
布局和定位差别可大了!
- 布局是屏幕平面上的,定位是垂直于屏幕的,什么意思,就相当于从侧面看他是怎么层叠的
- 讲定位,得回到文档流和盒模型说起。
- 盒模型我们很熟悉
背景background作用到哪个区域?
- 通过代码验证这个问题
.demo{
border:5px soolid rgba(255,0,0,1);
/*意思是让他变半透明,然后通过浏览器开发工具按alt+方向键修改,看他的颜色是怎么变化的
*/
}
注意:是rgba!rgba!rgba!图片效果没问题可能只是ide帮忙修正了
- OK,我们可以得出结论是,background是作用到border的外边界!
border,background,text,谁上谁下?
- 我们通过放大字体来验证
- OK,结果很明显, 结合上一个问题,得出结论
- text > border > background
一个div是什么样的分层?
图片来源饥人谷
- 内联子元素
- 浮动元素
- 块级子元素
- border
- background
- 通过实验也能看出,正常div的文字优先最高
- 然后就是浮动元素(只被文字内容盖住bg)
- 接着是块级子元素(盖住了正常的bg但是被文字内容盖住了他的bg)
- 然后就是border
- 最后是bg
针对float:left
- 你会发现
- 浮动元素的文字会被盖住,优先级最低
- 还有一点是:除了浮动元素,其他的文字内容,只按出现的先后顺序决定,后出现的会盖住前面的,记住就好
现在怎么理解浮动元素脱离文档流?
其实就是浮起来了一点点
一个新的属性-position
position
- static默认值,待在文档流里
- relative 相对定位,升起来,但不脱离文档流
- absolute绝对定位,定位基准是祖先里的非static
- fixed固定定位,定位基准是viewport(有诈)
- sticky粘滞定位,不好描述直接举例
经验
- 如果你写了absolute,一般都得补一个relative
- 如果你写了absolute或fixed,一定要补top和left
- sticky兼容性很差,主要用于面试装逼
什么是position:relative相对定位
使用场景
- 位移,比较少用,因为可以用flex处理
- 用于给absolute元素做爸爸
-比如
爸爸
.container{
border: 1px solid red;
height:300px;
position: relative;
}
儿子
.close{
position:absolute;/*绝对定位*/
top:0;
right:0;
}
配合 z-index设置谁更大
- z-index:auto 默认值,不创建新层叠上下文
- z-index:0 | 1 | 2
- z-index:-1 | -2
经验
- 写z-index:9999的都是彩笔
- 学会管理z-index
什么是position:abosulute绝对定位
使用场景
- 脱离原来的位置,另起一层,比如对话框的关闭按钮
- 鼠标提示
配合 z-index
经验
- 很多彩笔都以为absolute 是相对于relative定位的,而是:相对于祖先元素中最近的一个定位元素定位的,定位元素指position不是static的。
- 某些浏览器上如果不写top | left 会位置错乱
- 善用 left:100%
- 善用 left:50%;加负 margin
- white-space:nowrap;文字内容不准换行,以后会常用
小抄,做一个按钮悬浮提示框
<button>
点击
<span class="tips">提示内容</span>
</button>
button{
position:relative;
}
button span{
position: absolute;
border:1px solid red;
white-space:nowrap;
transform: translateX(-50%);/*居中对齐*/
left:50%;
bottom:calc(100% + 10px);
}
button span{display:none;/*默认隐藏*/
}
button:hover span{
display:inline-block;/*鼠标悬浮显示*/
}
什么是position:fixed 固定定位
使用场景
- 烦人的广告
- 回到顶部按钮
配合 z-index
经验
- 手机上尽量不要用这个属性,坑很多(无穷无尽的bug)
- 不信你搜索一下【移动端fixed】
写一个回到顶部按钮
<div class="container">
<div class="fixed">▲</div>
p{$}*100
- 这样我无论怎么滚动,这个“按钮”都是相对于viewport的位置,一直杵在那
- 西卡西,我们在container新增一个transform属性,他就失效了。。
什么是position:sticky粘滞定位
这个绿色的东西适合做标题栏or导航栏,但是目前的兼容性几乎不能用
层叠上下文
- 当position是relative时,会跑到p:static的元素的上方。PS:此时z-index=auto
正常
relative后
- 如果我们把某个relative的z-index 改成负数,那他就会跑到正常部分的下面,也就是说,跑到了bg的下面
什么是层叠上下文?
也叫堆叠上下文
问: z-index:10,5哪个高?
答:
比喻
- 每个层叠上下文就是一个新的小世界(作用域)
- 这个小世界里面的z-index跟外界无关
- 处在同一个小世界的z-index才能比较
哪些不正交的属性可以创建它
- MDN文档有写
- 需要记忆的有z-index(=0) | flex | opacity(不为1) | transform
- 指导这些知识的面试官也不太多,不用花时间背
- 忘了就搜【层叠上下文MDN】
- 你说CSS为什么不单独创建一个属性做这个事,8zd
- opacity和background具有非常明显的区别,那就是opacity会应用到所有的东西
负 z-index与层叠上下文
记住负z-index逃不出小世界
- 案发重演
- html>container>demo
- container{背景透明蓝},demo{背景红色}
此时,看到的是红色在上面(忘记截图)
- demo{z-index=-1;}
此时,看到的是半透明蓝色盖住一个红色
分析:html是层得上下文,container和demo都处在html的包裹下,然后因为demo说块级子元素,所以会显示在background的上方,再由于index=-1的操作,使demo跑到了background的下方。
- container{index=0;}
好!此时container的这个操作会创建一个层叠上下文,这个层叠上下文里只有一个demo,且处于index=auto的情况,然后因为demo依然是container的子级块元素,所以demo会显示在container的背景上方
换个角度,如果container里多一个demo2,那么demo2就会在demo的上方,因为此时demo {z-index=-1;}demo2{z-index=auto;}