Html 使div子级具有父级'；s右端作为起点的零位？

我创建了一个配置文件对话框主体，如下所示：

<div style="background-color: white;
            color: black;
            border-radius: 2px; 
            position: absolute; 
            top: 52px; 
            right: 10px; 
            padding: 2px">
  <div style="width: 0;
              height: 0;
              border-style: solid;
              border-width: 0 10px 15px 10px;
              border-color: transparent transparent #ffffff transparent;
              position: relative;
              top: -10px;
              right: -165px">
  </div>
</div>

---

我想将子小三角div始终放置在距离父div右端10-20px的地方。如何使第二个小三角div从父div右端开始？只需将父div的位置

设置为相对的
和子div的位置
设置为绝对的

在您的示例中类似于此：

<div style="background-color: black;color: black;border-radius: 2px; position: relative;  padding: 2px ; width:1000; height:1000;">
  <div style="
  position: absolute;
  width: 200;
              height: 200;
              border-style: solid;                
              border-color: transparent transparent #ffffff transparent;                  
              top: 10px;
              right: 16px;
              background-color: blue">
   </div>

内部DIV的宽度为20px（左边框+右边框）。在外DIV的边界上再加一个2px，三角形开始的零位是22px

因此，如果您希望三角形从外部DIV的右侧开始20px，则它是22px+20px：

right:-42px;




div{position:relative；}
#一{位置：绝对；顶部：52px；右侧：200px；填充：2px；背景色：白色；颜色：黑色；边框半径：2px；}
#两个{宽度：0；高度：0；顶部：-10px；右侧：-22px；
边框样式：实心；
边框宽度：0 10px 15px 10px；
边框颜色：透明透明#ffffff透明；
}
正文{背景：darkcyan；}
这里有两个很好的解决方案，可以让div及其内容与其他页面内容正常流动

如果您只需要“三角形”，请使用伪元素


#一个{
背景色：#ddd；
颜色：黑色；
边界半径：2px；
位置：相对位置；
填充：2px；
宽度：200px；
高度：80px；
右边填充：15px；/*弥补三角形，使内部内容不重叠*/
}
#一：之后{
内容：''；
位置：绝对位置；
排名：0；
右：0；
宽度：0；
身高：0；
边框样式：实心；
边框宽度：0 10px 15px 10px；
边框颜色：透明透明#f00透明；
}

请提供“jsFIDLE”的更多内容。我将为下一个问题考虑这个问题。谢谢您的回复，我已经用更容易的解决方法解决了。