项目开发过程中遇到的css那些事

z-index属性

创建堆叠上下文的条件：

1. 根元素（html元素）
2. 设置了z-index且position为relative、absolute、fixed、sticky的元素
3. opacity值小于1的元素

z-index没有按照预期工作可能原因：

1. 设置z-index属性的元素不在同一堆叠上下文内，确保设置z-index的元素在同一个堆叠上下文中
2. 设置z-index属性的元素没有设置定位属性，定位属性未默认值static（应设置position为relative、absolute、fixed、sticky）

设置z-index的元素位于同一堆叠上下文中

// template
<div class="main">
    <img :src="jrttTitle"/>
     <div class="container">双击编辑文字的发生发发打发的事实是事实是事实是事实uuuuuuuuuuuuuuuuuuuuuuuu1111111111111111111111111111111双击编辑文字的发生发发打发的事实是事实是事实是事实双击编辑文字的发生发发打发的事实是事实是事实是事实双击编辑文字的发生发发打发的事实是事实是事实是事实双击编辑文字的发生发发打发的事实是事实是事实是事实双击编辑文字的发生发发打发的事实是事实是事实是事实双击编辑文字的发生发发打发的事实是事实是事实是事实双击编辑文字的发生发发打发的事实是事实是事实是事实双击编辑文字的发生发发打发的事实是事实是事实是事实双击编辑文字的发生发发打发的事实是事实是事实是事实双击编辑文字的发生发发打发的事实是事实是事实是事实双击编辑文字的发生发发打发的事实是事实是事实是事实</div>
  </div>
// css
.main{
   
   
    width:750px;
    img{
   
   
    	width: 382px;
    	margin: 0 auto;
    	display: block;
    	z-index:10;
    	position:relative;
  }
  .container{
   
   
  	padding:85px 36px 54px;
  	border-radius:10px;
  	background: white;
  	position:relative;
  	top:-40px;
  	z-index:9;
  }
}

img元素和.container元素处于同一堆叠上下文html元素创建的堆叠上下文中
效果：

设置z-index的元素位于两个堆叠上下文中

// template
<div class="main">
    <img :src="jrttTitle"/>
</div>
<div class=