css 添加一个图标始终保持在pc端的右下角

<div class="dialog_maxdiv" style="display:block;">  
		<div id="center" style="background:url('http://XXXXX/b281ed2b-0a0f-46f8-9760-18c4b0392e40.png') no-repeat center center / cover;">  
		</div>  
	</div>

　　

.dialog_maxdiv{position: fixed;
    bottom:3.25em;
    right:3.25em;
    letter-spacing:1px;
    z-index:10;
    transition:0.1s linear;
    -webkit-transition:0.1s linear;
    -moz-transition: 0.1s linear;
    text-transform: uppercase;
    background: #425cbb;
    color: #fff;}
.dialog_maxdiv #center{
	height:68px;width:68px;border:3px solid #FF0000;
}

　　

 

 

又设计了一下如图：

 

.error_info{position:absolute;display:none;right:1.25em;z-index:9;width:100px;background:#ffffff;min-height:42px;line-height:42px;box-shadow:2px 4px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 2px 4px rgba(0, 0, 0, 0.3);-webkit-box-shadow:0 2px 4px rgba(0, 0, 0, 0.3);border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;bottom:10em}
.arrow-left{border-bottom:5px solid transparent;border-right:5px solid transparent;border-top:5px solid white;border-left:5px solid transparent;height:0;left:53px;position:absolute;top:52px;width:0;}
.error_word{color:#f55854;padding:9px;line-height:25px;}

<div class="error_info" style="display: block;">
          <div class="arrow-left"></div>
          <p class="error_word">不能为空</p>
    </div>

 

 

 

自己笔记