Question

我正在尝试将聊天功能添加到我的网站，所以我想在页面右侧底部添加一个Div，类似于本网站所示

http://kopatheme.com/demo/great-blog-free-web-template/

所以为此，我采用了一个示例HTML

这是我完整的HTML页面

   <!DOCTYPE html>
<html>
<head>
<style>
        #tawkchat-minified-container {
                margin: 0;
                border: 0 none;
                padding: 0;
                cursor: pointer;
                z-index: 999999;
                position: absolute;
                top: 0;
                bottom: 0;
                width: auto;
                height: auto;
                left: 0;
                right: 0;
                border: 1px solid #e3e0e7;
                border-bottom: 0;
                -webkit-background-clip: padding-box;
                -moz-background-clip: padding;
                background-clip: padding-box;
        }
        .border-corner {
                border-radius: 8px 8px 0px 0px !important;
                -moz-border-radius: 8px 8px 0px 0px !important;
                -webkit-border-radius: 8px 8px 0px 0px !important;
        }
        .theme-background-color {
                background-color: #7fb06f;
        }
        html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
                margin: 0;
                padding: 0;
                border: 0;
                outline: 0;
                font-size: 100%;
                vertical-align: baseline;
                background: transparent;
        }
        div {
                display: block;
        }
        p {
                display: block;
                -webkit-margin-before: 1em;
                -webkit-margin-after: 1em;
                -webkit-margin-start: 0px;
                -webkit-margin-end: 0px;
        }
        .theme-text-color {
                color: #ffffff;
        }
</style>
</head>
<body>
<div id="tawkchat-minified-container" class="theme-background-color border-corner">
   <div id="tawkchat-status-middle">
      <div id="tawkchat-status-text-container" class="theme-text-color">
         <p id="tawkchat-status-message"><span id="short-message">Offline</span></p>
      </div>
      <div id="tawkchat-minified-agent-container" class="theme-text-color">
         <p id="tawkchat-minified-agent-information-wrapper"></p>
      </div>
      <div id="tawkchat-minified-link-container">
         <a href="javascript:void(0);" id="maximizeChat" title="Maximize">
            <div class="icon"></div>
         </a>
      </div>
   </div>
</div>
</body>
</html>

并应用了CSS，但是当我运行上面的HTML时，显示的内容与此无关。

请告诉我如何在页面中添加类似的div？

https://jsfiddle.net/aarrLL02/

Answer 1

您好现在定义此css

定义position fixed而非absolute和删除 top和left position仅添加{{1}和} bottom一样

right

<强> Demo

Answer 2

您可以使用CSS属性position: fixed;将框修复设置为页面底部。

HTML：

<div class="chat">Chat</div>

CSS：

.chat {
   position: fixed;
   bottom: 0;
   right: 20px;
   width: 300px;
   height: 30px;

   color: white;
   background: green;
   padding: 7px 10px;
}

如何在页面右下方添加Div

2 个答案: