CSS定位

459 阅读5分钟

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是什么样的分层?

图片来源饥人谷

  1. 内联子元素
  2. 浮动元素
  3. 块级子元素
  4. border
  5. background

  1. 通过实验也能看出,正常div的文字优先最高
  2. 然后就是浮动元素(只被文字内容盖住bg)
  3. 接着是块级子元素(盖住了正常的bg但是被文字内容盖住了他的bg)
  4. 然后就是border
  5. 最后是bg

针对float:left

  1. 你会发现
  2. 浮动元素的文字会被盖住,优先级最低
  3. 还有一点是:除了浮动元素,其他的文字内容,只按出现的先后顺序决定,后出现的会盖住前面的,记住就好

现在怎么理解浮动元素脱离文档流?

其实就是浮起来了一点点

一个新的属性-position

position

  • static默认值,待在文档流里
  • relative 相对定位,升起来,但不脱离文档流
  • absolute绝对定位,定位基准是祖先里的非static
  • fixed固定定位,定位基准是viewport(有诈)
  • sticky粘滞定位,不好描述直接举例

经验

  • 如果你写了absolute,一般都得补一个relative
  • 如果你写了absolute或fixed,一定要补top和left
  • sticky兼容性很差,主要用于面试装逼

什么是position:relative相对定位

使用场景
  1. 位移,比较少用,因为可以用flex处理

  1. 用于给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;}