css箭头顶部不工作

我想在div顶部显示一个css箭头，如下所示：

问题是，箭头在分区内

这里怎么了

#news { 
 position:absolute;
 min-width: 140px;
 min-height:100px;
 background: #fff; 
 color: #000;
 border:1px solid #000;
}


#news:before {
  content: "";

  vertical-align: middle;
  margin-left: 70px;
  width: 0; 
  height: 0; 

  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid black;
}

---

尝试此方法，将相对位置置于父对象上，绝对位置置于子对象上：

#bellnews { 
 position:relative;
 width: 140px;
 height:100px;
 background: #fff; 
 color: #000;
 border:1px solid #000;
}


#bellnews:before {
  content: "";
  position: absolute;
  vertical-align: middle;
  margin-left: 70px;
  width: 0; 
  height: 0; 
  top: -5px;

  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid black;
}

---

您的定位代码有点不正确。定位箭头伪元素的最佳方法（由于）是使用

底部：100%

以及

边距：自动

、

左：0

、和

右：0

。这样，即使您决定更改箭头的大小，您的箭头也将始终保持在正确的位置

这是一个正在运行的现场演示：

#贝尔新闻{
位置：绝对位置；
最小宽度：140px；
最小高度：100px；
背景：#fff；
颜色：#000；
边框：1px实心#000；
}
#贝尔新闻：以前{
内容：“；
垂直对齐：中间对齐；
保证金：自动；
位置：绝对位置；
左：0；
右：0；
底部：100%；
宽度：0；
身高：0；
左边框：5px实心透明；
右边框：5px实心透明；
边框底部：5px纯黑；
}

---

您需要在伪元素

绝对值之前设置：

。 然后使用

top

控制伪元素的位置

这是一个很好的教程来理解基础知识。 工作代码

#贝尔新闻{
位置：绝对位置；
最小宽度：140px；
最小高度：100px；
背景：#fff；
颜色：#000；
边框：1px实心#000；
宽度：100px
}
#贝尔新闻：以前{
内容：“；
垂直对齐：中间对齐；
左边距：70像素；
宽度：0；
身高：0；
左边框：5px实心透明；
右边框：5px实心透明；
边框底部：5px纯黑；
位置：绝对位置；
顶部：-5px；
}

---

如果将#news div上的位置设置为相对位置，将三角形设置为绝对位置，则应该可以使用

更新您的小提琴：

---

使用

绝对
定位和
左：计算（50%-5px）始终保持在中间。



#贝尔新闻{
位置：相对位置；
最小宽度：140px；
最小高度：100px；
背景：#fff；
颜色：#000；
边框：1px实心#000；
显示：内联块；
}
#贝尔新闻：以前{
内容：“；
位置：绝对位置；
底部：100%；
宽度：0；
身高：0；
左：计算（50%-5px）；
左边框：5px实心透明；
右边框：5px实心透明；
边框底部：5px纯黑；
}

更好的系统定位底部：100%。如果将来更改边框底部，它将自动调整并居中，使用margin:auto；左：0px；右：0px；很好，因为需要这个位置绝对，谢谢你的朋友！不需要垂直对齐：中间和宽度为0，高度为0。。juz位置：绝对和边距顶部：-5pX父div绝对不需要是
位置：相对
。除了
static
之外，position的任何值都将导致创建新的定位上下文。它已被更正。不需要将
news
div设置为相对位置。除了
static
之外，position的任何值都将创建一个新的定位上下文。@MaximillianLaumeister-谢谢，已更新。不需要使新闻div相对。除了静态之外，position的任何值都将创建一个新的定位上下文。
#bellnews { 
 position: absolute;
 min-width: 140px;
 min-height:100px;
 background: #fff; 
 color: #000;
 border:1px solid #000;
}


#bellnews:before {
  content: "";
  position: absolute;
  top: -5px;
  vertical-align: middle;
  margin-left: 70px;
  width: 0; 
  height: 0; 

  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid black;
}