《深入解析CSS》- 定位和层叠上下文

最新推荐文章于 2023-10-01 16:52:41 发布

x优培

最新推荐文章于 2023-10-01 16:52:41 发布

阅读量214

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/qq_37077052/article/details/131786304

版权

对css有种抗拒感，因为网上css教程很多都是api展示型教学，敲一遍demo一时了解了，后续一旦不用就忘。很难将很多api串起来，“为什么要有这个定位？“，”它是为了解决什么问题？“。好在《深入解析CSS》Ch7 定位和层叠上下文 是用demo的形式带着一定的问题讲解了定位相关知识点。（另外一个觉得很好的是mdn上css的讲解）

所有代码地址：https://github.com/xuyoupei0619/cssDemo.git

一、思维导图

二、固定定位

文中先是用点击按钮显示模态框开始讲解。

1. 模态框的显示/隐藏

模态框部分html代码如下：

<!-- 模态框 -->
<div class="modal" id="modal">
  <!-- 遮盖层 -->
  <div class="modal-backdrop"></div>
  <div class="modal-body">
    <!-- 关闭按钮 -->
    <button class="modal-close" id="close">close</button>
    <h2>Wombat newsletter</h2>
    <p>Sign up for our monthly newsletter. No spam. We promise!</p>
    <form>
      <p>
        <label for="email">Email address:</label>
        <input type="text" name="email" />
      </p>
      <p><button type="submit">Submit</button></p>
    </form>
  </div>
</div>

显示（display: block）和隐藏(display: block)是通过按钮改变.modal选择器的显隐。所以JS代码如下

// 获取按钮DOM
let btn = document.getElementById('open');

// 改变模态框的展示状态，显示模态框
btn.addEventListener('click', function(event) {
  event.preventDefault(); //阻止事件的默认行为，按钮的默认行为是提交表单或刷新页面
  modal.style.display = 'block';
})

原始页面很大（设置了大的min-height），打开模态框可发现，滑动页面模态框依然相垂直水平居中且在视口中位置没变 - 固定定位的好处

模态框核心部分CSS代码如下，这样就保证了模态框在视口的位置：

.modal-body {
  position: fixed;
  top: 3em;
  bottom: 3em;
  right: 20%;
  left: 20%;
  padding: 2em 3em;
  background-color: white;
  /* 内容超过指定高/宽，浏览器自动添加滚动条显示溢出内容 */
  overflow: auto;
}

2. 遮盖层

遮盖层css代码看起来很简单

/* 打开模态框，用半透明蒙层遮挡网页剩余内容 */
.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0; 
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

首先是遮盖层的颜色，选择黑色但是设置了透明度0.5，所以可以看到后面页面的内容。

其次，我之前写过固定定位，以为固定定位只要写top/bottom，left/right的其中2个即可,然后抄这个教程的代码就傻了，写两个怎么没效果。。。后来才发现，当时写固定定位如果只写两个，宽高都是设置好的，但这个如果不写宽高，就必须要把top、right、bottom、left都标注，像上图代码这样，才能保证占据整个视口。

/* 打开模态框，用半透明蒙层遮挡网页剩余内容 */
.modal-backdrop {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

最后，模态框在遮盖层上面的原因就是两者都是定位元素，浏览器依旧遵循先渲染先出现的元素。

三、绝对定位

在二、固定定位的基础上，将关闭按钮移到了模态框右上角，这样更符合用户的习惯。因为关闭按钮的父元素模态框设置的是fixed，所以对关闭按钮使用绝对定位即可。设置top、right和按钮的宽高即可。

四、伪元素解决关闭按钮显示

四在三、绝对定位的基础上，改"close"为"x"，让用户打开模态框就知道点“x”就是关闭模态框。

1. 伪元素搭配绝对定位的使用

其实可以直接将<button>...</button>里的内容改为字母“x”,但书中说，为了避免阅读器读出字母“x”（是一个没考虑到的角度= =）,选择的方式是隐藏掉close(将close用text-indent将所在位置溢出模态框然后用overflow: hidden隐藏，再用伪元素的方式展示“x”)

.modal-close {
  position: absolute;
  top: 0.3em;
  right: 0.3em;
  padding: 0.3em;
  /* 鼠标悬浮变成小手 */
  cursor: pointer;
  font-size: 2em;
  height: 1em;
  width: 1em;
  /* 缩进块元素，1em一个汉字大小 */
  text-indent: 100em;
  /* 元素里的文字溢出并隐藏 */
  overflow: hidden;
  border: 0;

  &::after {
    position: absolute;
    line-height: .5;
    top: .2em;
    left: .1em;
    /* 继承元素，继承modal-close的text-indent所以需要重新设置 */
    text-indent: 0;
    /* 添加Unicode字符（乘法符号） */
    content: "\00D7";
  }
}

2. 如何显示"x"

文中提了几种方法，HTML中的"&times",CSS中的Unicode转移符"\00D7"，或者直接字母"x"，（\00D7比‘x’看起来更对称）不过要用伪元素的content，必须写转义的Unicode数字。

五、相对定位

相对定位是在原有的基础上多加了一个新需求，鼠标悬浮在主菜单"Main Menu"上显示子菜单。悬浮在子菜单时背景颜色变化

1. 为什么设置“main menu”相对定位而sub menu是绝对定位

其实这个地方想了一下，main menu相对的原因是避免它脱离文件流跑到顶部。而sub menu的设置绝对定位就很舒服了，因为它的包含块(有点像父元素的意思)main menu已经是定位元素，这样subMenu和Main Menu的距离就紧挨着。

2. “+” --- 相邻兄弟选择器的使用

menu部分html如下

<!-- nav也是html5的tag之一 -->
<nav>
  <div class="dropdown">
    <!-- 主菜单 -->
    <div class="dropdown-label">Main Menu</div>
    <!-- 悬浮菜单 -->
    <div class="dropdown-menu">
      <ul class="submenu">
        <li><a href="/">Home</a></li>
        <li><a href="/coffees">Coffee</a></li>
        <li><a href="brewers">Brewers</a></li>
        <li><a href="/specials">Specials</a></li>
        <li><a href="/about">About us</a></li>
      </ul>
    </div>
  </div>
</nav>

menu部分和相邻兄弟选择器有关的css如下

.dropdown-label {
  padding: .5em 2em .5em 1.5em;
  border: 1px solid #ccc;
  background-color: #eee;
  /* 菜单页显示向下的箭头*/
  &::after {
    content: "";
    position: absolute;
    top: 1em;
    right: 1em;
    border: .3em solid;
    border-color: black transparent transparent;
  }
}

/* +选择器：选中紧邻兄弟节点的下一个兄弟节点，如果想选择更远的兄弟节点 用~选择器 */
.submenu > li + li {
  border-top: 1px solid #999;
}

当时不太懂这个加号的作用，但简单实践（去掉了"+"后）后发现

因为.dropdown-label设置了border，在.submenu设置border-top,第一个的border会变粗。以前用的方法是.submenu > li:first-child再设置border为none，相对代码会多几行。

而"+"的意思是，选择.submenu下第一个<li>相邻的<li>,则是从第二个<li>开始都设置border-top。

3. 如何画三角形

第一次碰到这个问题是画一个这样的形状（鼠绘，很丑勿怪）

现在再次回顾也觉得挺巧妙的，主要是把不设置width和height，把border设置的很厚，如果要箭头朝右的三角形，就保证左边框有颜色，其余三遍颜色都是透明即可。

.triangle {
    border-left: 1px solid #black;
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
    border-right: 1px solid transparent;
}

六、z-index

在五、相对定位的前提下还是存在一些问题，“Main Menu”遮盖住了模态框，而我们希望的是模态框在最顶层。

为什么会出现这种现象？这还涉及到浏览器渲染元素的原理。

用最小白的话讲，浏览器渲染html元素也有顺序，一般是从写的<html></html>里面，区分定位元素和非定位元素，两种元素都是从最先写的开始渲染，后写的在它上面。定位元素在非定位元素上面。

为了解决2个定位元素由于渲染机制出现的遮盖现象，就有了z-index。z-index<0, 在非定位元素下面，z-index>0，越大就越在前面。所以解决这个问题的方法是把模态框的z-index设一个比main menu大的值。

其次书中还讲了层叠上下文，简单理解是一个定位元素A的z-index=1，别的定位元素z-index>1,这个A元素里面如果有子元素z-index=100时，子元素也不会显示在最顶层，因为父元素A的z-index小。

七、粘性布局

粘性定位大体理解就是子元素在未到达指定位置之前时会滚动，到达了后就在视口固定位置。

不过书中提到了一种特殊情况，当粘性定位的元素到达父元素底部后，继续滚动的话粘性定位元素继续滚动。

八、结束

为什么要学定位？就是当时碰到了一个问题：移动端内容超过屏幕会显示滚动条，滚动时导航栏也会随之滚动，需要其固定在屏幕顶部。当时简单的做法是需要固定的用fixed，剩下的用overflow-y: scroll。但涉及到滚动区域总是做的很吃力。故专门学习并记录内容。
现在情况从头到尾学习太难，按照工作需求来，碰到问题学习对应章节，加油！