+ Start a Discussion
TanDTanD 

How to display popup related to a div to a relative position?

I have 3 divs (each div have a popup window to display once the div is clicked). I am writing this code for visualforce page. 
Right now, popup window is displaying related to the div selected, But not in particular location. User-added image

The expected popup modal should be near the selected div like below
User-added image

The CSS code so far

     
.ui-selectee{
            position: relative;
            display: inline-block;
            border-right-style: solid;
            border-bottom-style: solid;
            border-top-style: solid;
            border-width: 0.1rem;
            border-color: #B2BABB;
            width: 4.1rem;
              max-width: 4.1rem;
              max-height: 2.3rem;
            height: 2.3rem;
            margin: 0;
            overflow: hidden;
            cursor: pointer;
          /*  white-space: nowrap; */ 
            }
            /* The actual popup window : reservation detail; */
            #ReservationBookedBlock, #ReservationBookedBlock1{ /*  visibility: hidden;  */
    background-color: white;
    color: black;
    border-radius: 6px;
    padding: 8px 0;
    position: absolute;
    z-index: 1;
    top: 125%;  
    left: 50%;
    margin-left: -80px;

                border: dotted; width:38rem; padding:1rem; 
                }  
                .ui-selectee .show {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;}
                /* The arrow of the popup */
            .ReservationBookedBlock_cssClass ::after{
                content: "";
                position: absolute;
                bottom: 100%;
                right: 50%;
                margin-left: -25px;
                margin-bottom: -5px;
                border-width: 5px;
                border-style: solid;
                border-color: #555 transparent transparent transparent;/* Add animation (fade in the popup) */ @-webkit-keyframes fadeIn {
    from {opacity: 0;} 
    to {opacity: 1;}}@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity:1 ;}}


  [1]: https://i.stack.imgur.com/UtClO.png
  [2]: https://i.stack.imgur.com/EWmeU.png
NagendraNagendra (Salesforce Developers) 
Hi Tan,

Position: fixed will solve your problem. Your use of position: absolute might be causing the issue.

Please try this 
background-color: white;
    color: black;
    border-radius: 6px;
    padding: 8px 0;
    position: fixed;
    z-index: 1;
    top: 125%;  
    left: 50%;
    margin-left: -80px;
There's more than a few ways to do what you're trying to do, but the Cadillac way to do it might be modal popups.For more information please check with below link. Please let us know if this helps.

Regards,
Nagendra.