显示细节时如何将圆形图像保持在适当位置，以便无论连续多少个图像都位于其正下方？

问题描述

因此，我正在制作像这样的应用中显示的头像：

通过邀请添加一个后，下一个头像将添加到最右边图像的直接右侧。

好的，现在，当我单击图像的正面时，会弹出一个模版，显示节目的聊天内容。

但是，这是我单击它时发生的情况。

需要做的是，模态需要直接显示在头像下...如果我单击另一个，则第一个关闭，然后下一个打开。

这是我的定位代码，HTML和CSS

CSS

 .chatavatarselectadjust {
  position: relative;
  margin-top: 0px;
  float: left;
  left: 160px;
  }


 // integration adjustment
 right: -180px;
 // right: 100px; // when display type changes for slide down //

 .chat-avatar-container {
    justify-content: flex-end;
    align-items: flex-end;
    width: 0%;
  }

  .chat-avatar-container.moved {
    position: fixed;
    top: 139px;
    z-index: 2;
    left: 480px;
  }

  width: 300px;
  border-radius: 25px;
  height: auto;
  display: flex;
  z-index: 1;
  position: relative;

  .chatbox-for-avatar {

  background: transparent;
  display: none; //flex;
  flex-direction: column;

  .pointing-to-social-target.up-arrow {
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    position: relative;
    border-bottom: 15px solid #f0f0f0;
    z-index: 1;
    transition: left 0s linear;
    align-self: center;
    top: 0;

    filter: drop-shadow(0px 0px 0px gray);
   }

 }

HTML：

<div class="social-targets" #selectionListContainer>
  <ul #selectionList>
     <li #chatAvatarIcon id="avatar{{i}}" *ngFor="let collaborator of collaborators; index as i;" [attr.data-index]="i">
       <pre hidden="hidden">{{i}}</pre>
       <pre hidden="hidden">{{collaborator | json}}</pre>
      <a (click)="changeThread($event,collaborator,i)" data-index="{{i}}">
        <img id="imgAvatar{{i}}" #chatteravatar src="img/non-gender-user-circled.png" [hide-delay]="1000" [width]="400" [offset]="16" ngbTooltip="{{collaborator.firstName}} {{collaborator.lastName}}" placement="top" class="iconsize zoom">
      </a>
      <div class="dot"></div>
    </li>
  </ul>
</div>

.TS片段

  public changeThread(event: any,user: Object,index: number): void {

    let boundingRect: {
      bottom: number,height: number,left: number,right: number,top: number,width: number,x: number,y: number
    };
    let widthElement: number;
    let boundingLeft: number;
    let deadCenter: number;
    let xPos: number;
    let centerX: string;
    let differenceX: number;
    let newChatPosition: number;
    let finalChatPosition: number;
    this.showChat = !this.showChat;
    // This is too early... I do it later on....
    // this.chatboxForAvatar.nativeElement.style.display = 'flex';
    if (!this.showChat) {

      this.avatarChatLi = document.querySelector('#avatar' + this.selectedIndex) as HTMLElement;
      this.avatarImg = document.querySelector('#imgAvatar' + this.selectedIndex) as HTMLImageElement;

      boundingRect = this.avatarImg.getBoundingClientRect() as DOMRect;
      // This stops the error on compile

      console.log('RECT AVATARIMG: ',boundingRect);

      boundingRect = this.avatarChatLi.getBoundingClientRect() as DOMRect;
      console.log('RECT CHATAVATARLI: ',boundingRect);

      console.log('Selected User: ',this.selectedUser);

      widthElement = Number(boundingRect.width) / 2;
      boundingLeft = boundingRect.left;
      deadCenter = Math.round(widthElement) + Math.round(boundingLeft);
      console.log('DEAD CENTER RECT AVATAR: ',deadCenter);

      xPos = this.clickHotspotImage(event);
      console.log('Click Spot Avatar: ' + xPos);

      console.log('Difference: ' + (xPos - deadCenter));
      differenceX = xPos - deadCenter;

      newChatPosition = xPos - boundingLeft;
      console.log('NewChatPos: ' + Math.round(Number(newChatPosition)));

      finalChatPosition = (boundingLeft + newChatPosition) - 1184;
      console.log('FinalChatPos: ' + Math.round(Number(finalChatPosition)));
      this.movementX = finalChatPosition;
      centerX = this.chatboxForAvatar.nativeElement.transform = 'translate(' + differenceX + 'px)';
      this.centerx = centerX;
      centerX = (event.target.offsetLeft + event.target.offsetWidth / 2) + 180; // This slides it over a wee bit to come directly under
      centerX = this.chatboxForAvatar.nativeElement.transform = 'translateX(' + finalChatPosition + 'px) !important';
      // const centerY = event.target.offsetTop + event.target.offsetHeight / 2;

      console.log('Center X: ' + centerX);

    }

    if (!this.show) {
      this.showHideChatAvatarBox();
    }

  } 

....

在此内部。showHideChatAvatarBox（）;

  public showHideChatAvatarBox(): void {
    if (this.show) {
      this.chatboxForAvatar.nativeElement.style.display = 'none';
      this.avatarImg.classList.add('zoom');
      this.avatarImg.classList.remove('zoomFocus');
      this.avatarImg.setAttribute('src','img/non-gender-user-circled.png');
      this.show = false;
    } else {
      this.chatboxForAvatar.nativeElement.style.display = 'flex';
      this.chatboxForAvatar.nativeElement.style.transform = this.centerx;
      this.avatarImg.classList.add('zoomFocus');
      this.avatarImg.classList.remove('zoom');
      this.avatarImg.setAttribute('src','img/non-gender-user-circled-active.png');
      console.log('ChatBoxContainer: ',this.chatboxForAvatar.nativeElement.style.transform);
      this.show = true;
    }
  }

最后，这是化身的放置方式：

  <div class="form__section-nav">
    <div class="center-top-container row">
      <!-- Chat Avatars are below and grow to the LEFT as they are added -->
      <div class="col-md-4 col-sm-2">
        <app-chat-avatar [currentState]="currentState"></app-chat-avatar>
      </div>
      <!-- This is the BLUE button to the RIGHT and does not move -->
      <div class="col-md-6">
        <app-social-share [state]="currentState"></app-social-share>
      </div>
    </div>
  </div>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）