如何设计带右上角图标的div？

Question

任何人都可以帮我设计带右上角图标的div吗？

我需要为此编码。

我附上样本图片供您参考。

Answer 1

  

它将与import sys class Person: def __init__(self, name,rollno,age): self.name = name self.rollno = rollno self.age=age def Name(self): return self.name + ", " + self.rollno + ", "+ self.age class Employee(Person): def __init__(self, name,rollno,age,m1,m2,m3): Person.__init__(self,name,rollno,age) self.m1 = m1 self.m2 = m2 self.m3 = m3 def Getemployee(self): return self.name +"," + self.rollno +" ,"+ self.age +" ,"+ self.m1 +" ,"+ self.m2 +", "+ self.m3 class EmployeeDetails(Employee): def __init__(self, name,rollno,age,m1,m2,m3,total): Employee.__init__(self,name,rollno,age,m1,m2,m3) self.total=self.m1+self.m2+self.m3 def empl(self): return self.name +" ,"+ self.rollno +" ,"+ self.age +", "+ self.m1 +", "+ self.m2 +" ,"+ self.m3 +" ,"+ self.total def main(): try: n=int(raw_input("Enter the number of employees:")) for i in range(n): name =raw_input("enter the name:") rollno =raw_input("enter the rollno:") age =raw_input("enter the age:") m1 =raw_input("enter m1:") m2 =raw_input("enter m2:") m3 =raw_input("enter m3:") total =self.m1+self.m2+self.m3 p = Person(name,rollno,age) e = Employee(name,rollno,age,m1,m2,m3) s= EmployeeDetails(name,rollno,age,m1,m2,m3,total) print p.Name() print e.Getemployee() print s.empl() except ValueError : print "value in error" if __name__=='__main__': main() 一起使用我对以下步骤的示例有所了解。

第1步：向您的父母css position attribute. box

提供

第2步：为您的子元素positon relative rightCircle添加右上角进行调整。

  

基本上position absolute可以参考   position :absolute和position:relative我们正在调整元素的位置   

     

这是一个片段：

top, right

.box{ width:200px; height:300px; border:1px solid #999; position:relative; margin-top:30px; }
.rightCircle{ position:absolute; width:40px; height:40px; border-radius:50%;  background:red; right:-20px; top:-20px;}

Answer 2

使用

position:absolute;
right:0;
top:0;
width:{youriconimgwidth}px;
height:{youriconimgheight}px;

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

Answer 3

我看到你已经有解释如何使用相对和绝对定位的答案，但在此期间我创建了一个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;
}