Home > OS >  CSS Align absolute div above button
CSS Align absolute div above button

Time：11-15

I have a problem. I am trying to create some kind of custom tooltip. For that I now have the following code:

.post-card {
    max-width: 700px;
    height: 175px;
    background-color: #F4FADC;
    border-radius: 8px;
    margin: 10px auto;
    padding: 10px;
    box-shadow: 0 6px 3px -3px gray;
}

.info-box {
    width: 100%;
    display: flex;
}

img {
    border-radius: 50%;
    height: 70px;
    width: 70px;
    object-fit: cover;
}

.text-box {
    margin-left: 10px;
    flex: 1;
    margin-right: 10px;
}

.report-box {

}

.separation-line {
    height: 1px;
    background-color: var(--color-primary);
    width: 100%;
    margin: 3px 0px;
}

.audio-control {
    display: flex;
    margin: 10px 5px;
}

.fas, .far {
    font-size: 20px;
    color: #153725;
}

.fa-play, .fa-pause {
    margin-right: 15px;
}

.fas.fa-heart {
    color: #DF4422;
}

.time {
    width: 40px;
    text-align: center;
}

.progress-bar {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1;
}

.sound-bars {
    flex: 1;
    z-index: 0;
    position: relative;
    margin-bottom: 7px;
}

.audio-bars {
    display: flex;
    flex: 1;
    margin: 0px 3px;
    height: 30px;
    align-items: end;
    position: relative;
}

button {
    background-color: transparent;
    border: none;
    padding: 0px;
    margin: 0px;
    cursor: pointer;
}

.hidden {
    display: none;
}

.post-controls {
    display: block;
    float: right;
}

.like-counter {
    display: block;
    float: right;
}

.share-button {
    display: inline-block;
}


.popup-share {
    position: absolute;
    display: flex;
    flex-direction: column;
    height: 30px;
    width: 130px;
    text-align: center;
    background-color: #547430;
    -moz-border-radius:5px;-ie-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;border-radius:5px;
}

.popup-share * {
    color: white;
    align-content: center;
    margin: auto auto;
}

#tail {
    position:absolute;
    bottom:-20px;
    left: calc(50% - 5px);
    width:0;height:0;
    border-color: #547430 transparent transparent transparent;
    border-width:10px;
    border-style:solid;
}


.post-controls button {
    margin: 0px 6px;
}

.heart-animation {
    animation-name: heart-bobble;
    animation-duration: 0.8s;
}

@keyframes heart-bobble {
    0%   {transform: scale(0.7);}
    25%  {transform: scale(1.3);}
    50%  {transform: scale(0.8);}
    75%  {transform: scale(1.2);}
    100%  {transform: scale(1);}
}
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>My Site</title>
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/icon?family=Material Icons" rel="stylesheet">
</head>
<body>
<div class="post-card" [ngStyle]="{'backgroundColor': backgroundColor}">
    <div class="info-box">
        <img src="https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8MXx8fGVufDB8fHx8&w=1000&q=80">
        <div class="text-box">
            <label class="title">title</label>
            <div class="separation-line"></div>
            <label class="description">This is the description</label>
        </div>
        <div class="report-box">
            <button [id]="'btnReport-'   id" (click)="onReportClick(id)"><i class="fas fa-flag"></i></button>
        </div>
    </div>

    <div class="audio-control">
        <button [id]="'btnPlay-'   id" (click)="onPlayClick(id)" value="play"><i class="fas fa-play"></i></button>
        <span [id]="'current-time-'   id" class="time">0:00</span>

        <!-- Animate from bottom -->
        <div class="audio-bars">
            <div [id]="'sound-bars-'   id" class="sound-bars hidden">
                <div class="animate-bars">
                    <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
                    <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
                    <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
                    <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
                </div>
            </div>
            <input type="range" [id]="'progress-bar-'   id" class="progress-bar" max="93" value="0" (input)="onProgressChange(id)">
        </div>

        <span [id]="'duration-'   id" class="time">1:33</span>
    </div>

    <div class="post-controls">
        <button *ngIf="accountService.isLoggedIn" [id]="'btnLike-'   id" (click)="onLikeClick(id)">
            <i class="far fa-heart"></i>
        </button>

        <div class="share-button">
            <div [id]="'linkCopied-'   id" class="popup-share">
                <label>Link copied!</label>
                <div id="tail"></div>
            </div>
            <button [id]="'btnShare-'   id"><i class="fas fa-share-alt"></i></button>
        </div>

        <button [id]="'btnDetails-'   id" routerLink="/details"><i class="fas fa-expand"></i></button>
    </div>
    <div class="like-counter">
        <label [id]="'lblLikeCounter-'   id">177 Likes</label>
    </div>
</div>
</body>
</html>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

But the layer below my tooltip is the share button and I am trying to align my tooltip above the share button. The solution has to be responsive of course and I tried using:

bottom: 40px;

But those positioning this places the tooltip far away from the postcard. I can have multiple post cards on my screen, so each has his own tooltip. Can someone help me align this tooltip above the share button?

CodePudding user response：

You did not specify the positioning when you used position: absolute. I added

    top: -40px;
    left: -56px;

You must also take this into consideration:

The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block. Its final position is determined by the values of top, right, bottom, and left. MDN

That is why I also added position: relative to the tooltips parent element.

I also had to add z-index to place the tooltip on top of the player's progress bar. You can temporarily remove that z-index statement to see what I mean.

The changes I made are all in the CSS and are identified with this comment: /*---- added ----*/

.post-card {
    max-width: 700px;
    height: 175px;
    background-color: #F4FADC;
    border-radius: 8px;
    margin: 10px auto;
    padding: 10px;
    box-shadow: 0 6px 3px -3px gray;
}

.info-box {
    width: 100%;
    display: flex;
}

img {
    border-radius: 50%;
    height: 70px;
    width: 70px;
    object-fit: cover;
}

.text-box {
    margin-left: 10px;
    flex: 1;
    margin-right: 10px;
}

.report-box {

}

.separation-line {
    height: 1px;
    background-color: var(--color-primary);
    width: 100%;
    margin: 3px 0px;
}

.audio-control {
    display: flex;
    margin: 10px 5px;
}

.fas, .far {
    font-size: 20px;
    color: #153725;
}

.fa-play, .fa-pause {
    margin-right: 15px;
}

.fas.fa-heart {
    color: #DF4422;
}

.time {
    width: 40px;
    text-align: center;
}

.progress-bar {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1;
}

.sound-bars {
    flex: 1;
    z-index: 0;
    position: relative;
    margin-bottom: 7px;
}

.audio-bars {
    display: flex;
    flex: 1;
    margin: 0px 3px;
    height: 30px;
    align-items: end;
    position: relative;
}

button {
    background-color: transparent;
    border: none;
    padding: 0px;
    margin: 0px;
    cursor: pointer;
}

.hidden {
    display: none;
}

.post-controls {
    display: block;
    float: right;
}

.like-counter {
    display: block;
    float: right;
}

.share-button {
    display: inline-block;
    position: relative;  /*---- added ----*/
}


.popup-share {
    position: absolute;
    top: -40px;          /*---- added ----*/
    left: -56px;         /*---- added ----*/
    z-index: 9;          /*---- added ----*/
    display: flex;
    flex-direction: column;
    height: 30px;
    width: 130px;
    text-align: center;
    background-color: #547430;
    -moz-border-radius:5px;-ie-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;border-radius:5px;
}

.popup-share * {
    color: white;
    align-content: center;
    margin: auto auto;
}

#tail {
    position:absolute;
    bottom:-20px;
    left: calc(50% - 5px);
    width:0;height:0;
    border-color: #547430 transparent transparent transparent;
    border-width:10px;
    border-style:solid;
}


.post-controls button {
    margin: 0px 6px;
}

.heart-animation {
    animation-name: heart-bobble;
    animation-duration: 0.8s;
}

@keyframes heart-bobble {
    0%   {transform: scale(0.7);}
    25%  {transform: scale(1.3);}
    50%  {transform: scale(0.8);}
    75%  {transform: scale(1.2);}
    100%  {transform: scale(1);}
}
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>My Site</title>
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/icon?family=Material Icons" rel="stylesheet">
</head>
<body>
<div class="post-card" [ngStyle]="{'backgroundColor': backgroundColor}">
    <div class="info-box">
        <img src="https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8MXx8fGVufDB8fHx8&w=1000&q=80">
        <div class="text-box">
            <label class="title">title</label>
            <div class="separation-line"></div>
            <label class="description">This is the description</label>
        </div>
        <div class="report-box">
            <button [id]="'btnReport-'   id" (click)="onReportClick(id)"><i class="fas fa-flag"></i></button>
        </div>
    </div>

    <div class="audio-control">
        <button [id]="'btnPlay-'   id" (click)="onPlayClick(id)" value="play"><i class="fas fa-play"></i></button>
        <span [id]="'current-time-'   id" class="time">0:00</span>

        <!-- Animate from bottom -->
        <div class="audio-bars">
            <div [id]="'sound-bars-'   id" class="sound-bars hidden">
                <div class="animate-bars">
                    <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
                    <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
                    <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
                    <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
                </div>
            </div>
            <input type="range" [id]="'progress-bar-'   id" class="progress-bar" max="93" value="0" (input)="onProgressChange(id)">
        </div>

        <span [id]="'duration-'   id" class="time">1:33</span>
    </div>

    <div class="post-controls">
        <button *ngIf="accountService.isLoggedIn" [id]="'btnLike-'   id" (click)="onLikeClick(id)">
            <i class="far fa-heart"></i>
        </button>

        <div class="share-button">
            <div [id]="'linkCopied-'   id" class="popup-share">
                <label>Link copied!</label>
                <div id="tail"></div>
            </div>
            <button [id]="'btnShare-'   id"><i class="fas fa-share-alt"></i></button>
        </div>

        <button [id]="'btnDetails-'   id" routerLink="/details"><i class="fas fa-expand"></i></button>
    </div>
    <div class="like-counter">
        <label [id]="'lblLikeCounter-'   id">177 Likes</label>
    </div>
</div>
</body>
</html>
<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Page link：https//www.codepudding.com/os/191065.html

Prev:Replace BBCodes in HTML codes and vice versa
Next:How can I add element from my express server to my html table?
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding