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;}

avatar
文章
阅读
粉丝