为什么当我设置溢出属性为隐藏，然后一个伪元素消失

Why when I set overflow property to hidden, then a pseudo element goes away?

本文关键字：一个 消失 元素 然后 设置 溢出 属性 隐藏 为什么      更新时间：2023-09-26

下面是我的代码:

.user_inbox{
  position:absolute;
  background-color: #fff;
  border-radius:2px;
  -o-border-radius:2px;
  -moz-border-radius:2px;
  -webkit-border-radius:2px;
  -ms-border-radius:2px;
  box-shadow: 0px 0px 6px #ccc;
  -o-box-shadow: 0px 0px 6px #ccc;
  -moz-box-shadow: 0px 0px 6px #ccc;
  -webkit-box-shadow: 0px 0px 6px #ccc;
  -ms-box-shadow: 0px 0px 6px #ccc;
  width:  310px;
  direction:ltr;
  left:53px;
  top:63px;
  border:1px solid #CCC;
  z-index:5000;
  height:100%;
  max-height:55%;
  min-height:180px;	
  right: 53px;
  top: 65px;
  /* overflow:hidden; */
}
.user_inbox:after{
  background-color: #fff;
  box-shadow: -2px 2px 2px 0 rgba( 178, 178, 178, .4 );
  -o-box-shadow: -2px 2px 2px 0 rgba( 178, 178, 178, .4 );
  -moz-box-shadow: -2px 2px 2px 0 rgba( 178, 178, 178, .4 );
  -webkit-box-shadow: -2px 2px 2px 0 rgba( 178, 178, 178, .4 );
  -ms-box-shadow: -2px 2px 2px 0 rgba( 178, 178, 178, .4 );
  content: "'00a0";
  display: block;
  height: 12px;
  width:  12px;
  margin-left:18px;
  position:absolute;
  top:-5px;
  transform:rotate(135deg);
  -moz-transform:rotate(135deg);
  -ms-transform:rotate(135deg);
  -webkit-transform:rotate(135deg);
  -o-transform:rotate(135deg);
  background-color: #F7F7F7;
  right: 18px;
}
.title{
  background-color: #F7F7F7;
  display:block;
  width; 100%;
  height: 20px;
  text-align: center;
  padding: 5px;
}
<div class="user_inbox">
  <span class="title">there is a title</span>
</div>

现在请删除这一行周围的注释:overflow:hidden; (我的意思是请取消注释)…然后突然向上的箭头就会消失。

我需要这个向上的箭头和这个属性overflow:hidden;。我该怎么做呢?

overflow:hidden是游戏结束的子元素试图弹出它的父溢出边界。
相反，创建一个会溢出(隐藏)的内部容器

.overflow{
  position: relative;
  overflow:hidden;
  height: inherit;
  width: inherit;
  background: #cf5;
}
.user_inbox{
  position:absolute;
  background-color: #fff;
  border-radius:2px;
  box-shadow: 0px 0px 6px #ccc;
  width:  310px;
  direction:ltr;
  left:53px;
  top:63px;
  border:1px solid #CCC;
  z-index:5000;
  height:100%;
  max-height:55%;
  min-height:180px;	
  right: 53px;
  top: 65px;
}
.user_inbox:after{
  background-color: #fff;
  box-shadow: -2px 2px 2px 0 rgba( 178, 178, 178, 0.4 );
  content: "'00a0";
  display: block;
  height: 12px;
  width:  12px;
  margin-left:18px;
  position:absolute;
  top:-5px;
  transform:rotate(135deg);
  -moz-transform:rotate(135deg);
  -ms-transform:rotate(135deg);
  -webkit-transform:rotate(135deg);
  -o-transform:rotate(135deg);
  background-color: #F7F7F7;
  right: 18px;
}
.title{
  background-color: #F7F7F7;
  display:block;
  width; 100%;
  height: 20px;
  text-align: center;
  padding: 5px;
}
<div class="user_inbox">
  <div class="overflow">
    <span class="title">there is a title</span>
  </div>
</div>

或"bottom" (标题下方);

.overflow{
  position: relative;
  overflow:hidden;
  width: inherit;
  background: #cf5;
  max-height:55%;
  min-height:180px;	
}
.user_inbox{
  position:absolute;
  background-color: #fff;
  border-radius:2px;
  box-shadow: 0px 0px 6px #ccc;
  width:  310px;
  direction:ltr;
  left:53px;
  top:63px;
  border:1px solid #CCC;
  z-index:5000;
  /*height:100%;
  max-height:55%;
  min-height:180px;	*/
  right: 53px;
  top: 65px;
}
.user_inbox:after{
  background-color: #fff;
  box-shadow: -2px 2px 2px 0 rgba( 178, 178, 178, 0.4 );
  content: "'00a0";
  display: block;
  height: 12px;
  width:  12px;
  margin-left:18px;
  position:absolute;
  top:-5px;
  transform:rotate(135deg);
  -moz-transform:rotate(135deg);
  -ms-transform:rotate(135deg);
  -webkit-transform:rotate(135deg);
  -o-transform:rotate(135deg);
  background-color: #F7F7F7;
  right: 18px;
}
.title{
  background-color: #F7F7F7;
  display:block;
  width; 100%;
  height: 20px;
  text-align: center;
  padding: 5px;
}
<div class="user_inbox">
  <span class="title">there is a title</span>
  <div class="overflow"></div>
</div>

相关文章：