html - CSS - float 不能正常工作

Question

我正在为我的网络应用程序创建聊天框。当我单击 float 按钮时，聊天框将出现在 div 容器之后。但我希望聊天框固定在右侧。我不知道我哪里做错了。在这里我附上了一些代码示例。

html:

    <div class="float_template" *ngIf = "visible;then chatbot else fab"></div>
<ng-template #chatbot >
   <div class="container_chatbot">
      <div class="app">
            <div class="head clearfix">
            <span class="messages-notification">
                <i class="fa fa-comments-o"></i>
                <span class="count"></span>
            </span>
            <span class="title">Messenger</span>
            <span class="create-new">
              <a (click) = "onVisible()" class="close">
                <i class="material-icons">expand_more</i>
              </a>
               <!--<a (click) = "onVisible()" href="javascript:void(0);"> <i class="fa fa-pencil-square-o"></i> </a>-->
            </span>
            </div>

            <div class="body">
                <div class="friend-list clearfix">
                    <ul>
                        <li class="active">
                            <span class="messages hide">
                            <span class="count"></span>
                            </span>
                            <img src="https://s5.postimg.org/3wnxyjz8n/image.png" alt="" />
                            <span class="name">
                                 Jiffy                            
                            </span>
                        </li>

                    </ul>
                </div>
                <div class="chat-messages">
                    <div  class="chat">
                        <div  class="chat-content clearfix" >
                            <span *ngFor= "let message of messages_receiver" class="friend last">
                            {{message}}                           
                            </span>

                            <span *ngFor= "let message of messages_sender" class="you first">
                              {{message}}                              
                            </span>                            
                        </div>
                        <div class="msg-box">
                            <input type="text" [(ngModel)]= "message" class="ip-msg" placeholder="type something.." />
                            <span class="btn-group">
                            <a (click) = "send()" >
                              <i class="fa fa-paper-plane"></i>
                            </a>
                            </span>
                        </div>
                    </div>                    
                </div>
            </div>
      </div>
 </div>
</ng-template>

CSS:

 .container_chatbot
{
  position: absolute;
  width: 430px;
  height: 100%;
  margin: 0px auto;
  margin-left:70% ;
  display: inline-block;

}

检查这个: https://stackblitz.com/edit/angular-eoillt?file=app%2Fapp.component.html

Answer 1

旋转木马阻止聊天框出现在它上面，因此您必须将旋转木马的位置设置为 absolute 和 height: 100% 以便视频覆盖整个页面，不会溢出。

聊天框还需要以下属性:

.carousel-inner {
  position: absolute;
  height: 100%;
}

.container_chatbot
{
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 1;
}


div.app
{
  position: relative;
  width: 380px;
  height: 600px;
  background: #5850c0;
}

div.app:before
{
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 100px;
  display: inline-block;
  box-shadow: inset 0 80px 85px -35px #3c33b0;
  z-index: 0;
}

div.app:after
{
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 100px;
  display: inline-block;
  bottom: 0;
  /*box-shadow: inset 0 -80px 85px -35px #3c33b0;*/
  z-index: 0;
}

div.app div.head
{
  z-index: 1;
  position: relative;
  display: block;
  width: 100%;
  height: 50px;
  line-height: 48px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: rgba(255,255,255,0.7);

  background: #271c5d;
  border-bottom: 1px solid rgba(255,255,255,0.35);
  box-shadow: inset 0 -15px 35px -5px rgba(0,0,0,0.3);
}

div.head span.title
{
  position: absolute;
  width: 100%;
  display: inline-block;
  left: 0;
  font-size: 16px;
  font-weight: 500;
  margin-top: 2px;
  color: #fff;
}
div.head span.messages-notification
{
  position: relative;
  float: left;
  font-size: 18px;
  font-weight: normal;
  margin-left: 15px;
  color: #fff;
  margin-top: 2px;
}


div.head span.create-new
{
  float: right;
  font-size: 17px;
  font-weight: 500;
  margin-right: 15px;
  color: #fff;
  margin-top: 10px;
}

.clearfix::after
{
  content: '';
  clear: both;
  display: table;
}
.friend-list
{
  margin-top: 25px;

}

.friend-list ul li
{
  position: relative;
  list-style: none;
  float: left;
  width: 20%;
  text-align: center;
  margin-left: 28%;
  
}

.friend-list ul li img
{
   width: 150%;
   height: 150%;
  border-radius: 100%;
  border: 3px solid rgba(255,255,255,1);
  margin-bottom: 10px;
}
.friend-list ul li.active img,
.friend-list ul li.active span.name
{
  opacity: 1;
}

.friend-list ul li.active img
{
  box-shadow: 1px 1px 0 rgba(39,28,93,0.5),
              -1px -1px 0 rgba(39,28,93,0.5),
              0 0 35px rgba(255,255,255,0.3);
}

.friend-list ul li span.name
{
  position: relative;
  width: 100%;
  left: 0;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: rgba(255,255,255,0.9);
  margin-left: 30%;
}

.friend-list ul li.active span.name
{
  top: -7px;
}

.friend-list ul li span.name span.status
{
  display: block;
  text-transform: none;
  font-weight: 300;
  font-size: 8px;
  color: rgba(255,255,255,0.5);
  margin-left: 30%;
}

.friend-list ul li.active span.name span.status
{
  font-size: 9px;
}
.friend-list ul li.active span.messages,
.friend-list ul li span.messages.hide
{
  display: none;
}
div.chat-messages div.chat
{
margin-top: 25px;
  position: relative;
  width: 95%;
  height: 300px;
  background: #fcfcfe;
  left: 50%;
  margin-left: -180px;
  
  border-radius: 5px;
  font-size: 15px;
 

  /*box-shadow: 30px 0 0 -15px #a7a4dd,
              60px 0 0 -30px #7570c8,
              -30px 0 0 -15px #a7a4dd,
              -60px 0 0 -30px #7570c8,
              0 0 25px rgba(255,255,255,0.5);*/
}
div.chat div.chat-content > span
{   
  margin-bottom: 12px;
}

div.chat div.chat-content span.friend
{
  position: relative;
  width: 70%;
  height: auto;
  display: inline-block;
  background: #fff;
  padding: 10px;
  padding-bottom: 25px;
   
  box-shadow: 2px 2px 20px -2px rgba(60,51,176,0.2);
  color: rgba(60,51,176,1);
}
/*div.chat div.chat-content span.friend.first
{
  border-radius: 15px 15px 15px 2px;
}*/

div.chat div.chat-content span.friend.last
{
  border-radius: 2px 15px 15px 15px;
}

div.chat div.chat-content span.friend span.time
{
  position: absolute;
  display: block;
  right: 0;
  margin-top: 5px;
  margin-right: 10px;
  font-size: 10px;
  font-weight: 500;
  color: rgba(60,51,176,0.5);
}

div.chat div.chat-content span.you
{
  position: relative;
  float: right;
  width: 70%;
  height: auto;
  background: #5850c0;
  display: inline-block;
  padding: 10px;
  padding-bottom: 25px;
  color: #fff;

  box-shadow: 2px 2px 20px rgba(60,51,176,0.2),
              inset -10px -10px 55px rgba(255,255,255,0.1);
}
div.chat div.chat-content span.you span.time
{
  position: absolute;
  display: block;
  right: 0;
  margin-top: 5px;
  margin-right: 10px;
  font-size: 10px;
  font-weight: 500;
  color: rgba(255,255,255,0.5);
}

div.chat div.chat-content span.you.first
{
  border-radius: 15px 15px 2px 15px;
}

/*div.chat div.chat-content span.you.last
{
  border-radius: 15px 2px 15px 15px;
}*/
div.msg-box
{
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  border-top: 1px solid rgba(60,51,176,0.1);
  overflow: hidden;
  margin-top: 20px;
}

div.msg-box .ip-msg
{
  width: 70%;
  font-size: 14px;
  padding: 15px;
  padding-right: 30%;
  color: rgba(60,51,176,0.9);
  border: none;
  background: rgba(0,0,0,0.03);
}

div.msg-box .ip-msg::placeholder
{
  color: rgba(60,51,176,0.4);
}

div.msg-box span.btn-group
{
  position: absolute;
  right: 0;
  top: 0;
  margin-top: 14px;
  display: inline-block;
  margin-right: 10px;
}

div.msg-box span.btn-group i
{
  color: rgba(60,51,176,1);
  font-size: 18px;
  padding: 0 7px;
}

position、bottom 和 right 属性用于定位聊天框，而 z-index 用于聊天框位于 video 元素之上。

在您的 css 文件中复制并使用此代码段，而不是您的代码。

希望这是您正在寻找的输出。