Question

我正尝试尝试放置在页面右下角的DIV，并在该DIV的右上角有一个关闭按钮

我有以下标记

<div id="message">
    <p>Some Message</p>
    <span class="shut">

    </span>
</div>

我已将CSS定义如下

#message{
    position:fixed;
    bottom:0;
    height:320px;
    width:310px;
    background: #453fefe;     
    padding: 10px 20px;             
    border-radius: 5px;
}

.shut {
    background: transparent url('shutig.png') 0 0 no-repeat;
    position: absolute;
    top: 4px;
    right: 4px;
}

不幸的是，我无法实现我想要的目标。什么是正确的方法？

Answer 1

不要对.shut使用绝对定位，它会相对于屏幕而不是父母定位它。尝试使用浮动游戏或使用表格

Answer 2

您的背景颜色无效，这使得CSS无法正常工作。此外，关闭按钮无法呈现，因为您没有为其设置明确的大小。

#message{
 position:fixed;
 bottom:0;
 right:0;
 height:120px;
 width:210px;
 background: #45fefe; /* you set #453fefe which is an invalid color */
 padding: 10px 20px;             
 border-radius: 5px;
}

.shut {
 background: transparent url('http://placehold.it/20x20') 0 0 no-repeat;    
 position: absolute;
 top: 4px;
 right: 4px;
 width:20px;
 height:20px;
}

将Div保留在页面底部，右侧有一个图像

2 个答案:

Demo.