Html 如何设计具有右上角图标的div？

有人能帮我设计一个带有右上角图标的div吗

我需要这个的编码

我随函附上样品图片供您参考

它将使用

css position属性。

参考我所做的示例，遵循以下步骤

步骤1给你的父母

方框

相对位置

第2步给您的子元素

右圆圈

绝对位置

以右上方进行调整。

基本

位置：绝对
参考
position:relative
和
top，right
我们正在调整元素的位置

以下是一个片段：


.box{宽度：200px；高度：300px；边框：1px实心#999；位置：相对；边距顶部：30px；}
.rightCircle{位置：绝对；宽度：40px；高度：40px；边框半径：50%；背景：红色；右侧：-20px；顶部：-20px；}


它将使用
css position属性。
参考我所做的示例，遵循以下步骤

步骤1给你的父母
方框
相对位置

第2步给您的子元素
右圆圈
绝对位置
以右上方进行调整。

基本
位置：绝对
参考
position:relative
和
top，right
我们正在调整元素的位置

以下是一个片段：


.box{宽度：200px；高度：300px；边框：1px实心#999；位置：相对；边距顶部：30px；}
.rightCircle{位置：绝对；宽度：40px；高度：40px；边框半径：50%；背景：红色；右侧：-20px；顶部：-20px；}

使用

请记住，在使用绝对位置之前，父div应该是相对位置的

请记住，在使用绝对位置之前，父div应该是相对位置的
我看到您已经有了解释如何使用相对和绝对位置的答案，但同时我创建了一个JS小提琴：）


HTML:

我知道你已经有了解释如何使用相对和绝对定位的答案，但我同时创建了一个JS提琴：）


HTML:

你知道，她不是来免费为你工作的。你已经试过什么了？在你的帖子中添加相关代码。所有回答这个糟糕问题的用户都应该——特别是“问得好的问题”部分。所以，你知道，这里不是免费为你工作的。你已经试过什么了？在你的帖子中添加相关代码。所有回答了这个糟糕问题的用户都应该——特别是“问得好的问题”部分。
position:absolute;
right:0;
top:0;
width:{youriconimgwidth}px;
height:{youriconimgheight}px;

<div id="box">
  <div id="icon">
    |&gt;
  </div>
  Contents of the box
</div>

#box {
  position: relative;
  width: 200px;
  height: 200px;
  padding: 10px;
  margin: 100px;
  background-color: white;
}

#icon {
  background-color: green;
  color: white;
  padding: 10px;
  width: 20px;
  height: 20px;
  position: absolute;
  right: -20px;
  top: -20px;
}