html - 如何设计带有右上 Angular 图标的div？

This question already has answers here:

Getting the button into the top right corner inside the div box
                                
                                    （2个答案）
                                
                        
                                2年前关闭。
            
                    
谁能帮我设计一个带有右上角图标的div？

我需要为此编码。

特此附上样品图片供您参考。

最佳答案

我看到您已经有了解释如何使用相对和绝对定位的答案，但是与此同时，我创建了一个JS小提琴:)

Link to JS fiddle with example

HTML：

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

CSS：

#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;
}

关于html - 如何设计带有右上 Angular 图标的div？ ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43277005/