Unable to add button inside div tag

September 27, 2023

I’m trying to add a button over my social link div tags, but no matter what I do, the button is not displayed onto of the div tag.

As you can see, the button is inside the parent div tag, but it is displayed too far down. How can I move it to be inside the div tag.

Here is my code:

    <!DOCTYPE html>
    <html>
    <style>
        
    html,body,#container {
        background-color: rgb(230,230,230);
        margin:0px;
        padding:0px;
    }
    
    #container {
        position: relative;
    }
    
    #spaceBox {
        background-color: rgba(0,0,0,0.0);
        width: 80%;
        max-width: 800px;
        height: 30px;
        top:0px; bottom:0px; left:0px; right:0px;
        margin: auto;
        border-radius: 25px;
    }
    
    #socialLinksContainerBox {
        background-color: white;
        width: 80%;
        max-width: 800px;
        height: 125px;
        top:0px; bottom:0px; left:0px; right:0px;
        margin: auto;
        border-radius: 25px;
        text-align: center;
        overflow:hidden;
        white-space: nowrap;
    }
    
    #socialLinksMiniBox {
        background-color: rgb(240,240,240);
        width: calc(100% / 7);  
        height: 43%;
        display: inline-block;
        vertical-align: top;   
        text-align:center;
        margin:2%;    
        padding:20px;
        border-radius: 25px;
    }
    
    #socialLogo {
        width: 40px;
        height: 40px;
    }
    
    #socialLabel {
        position: relative;
        width: 100%;
        height: 40px;
        font-size: 15px;
        font-family: 'HelveticaNeue';
        bottom: 12px;
        text-align: center;
    }
    
    #socialButtonOne {
        position: relative;
        width: 100%;
        height: 100%;
        margin: auto;
        top:0px; bottom:0px; left:0px; right:0px;
        z-index: 100;
        display: block;
    }
    
    </style>
    
    <head>
      <title>MyCircle</title>
    </head>
    <body>
    <div id="container">
        <div id="spaceBox"></div>
        <div id="socialLinksContainerBox">
            <div id="socialLinksMiniBox">
                <img id="socialLogo" src="https://my-circle.io/OtherFiles/SocialLogos/instagram.png">
                <p id="socialLabel">Instagram</p>
                <button id="socialButtonOne" type="button" onclick="alert('Hello world!')">Click Me!</button>
            </div>
            <div id="socialLinksMiniBox">
                <img id="socialLogo" src="https://my-circle.io/OtherFiles/SocialLogos/youtube.png">
                <p id="socialLabel">YouTube</p>
            </div>
            <div id="socialLinksMiniBox">
                <img id="socialLogo" src="https://my-circle.io/OtherFiles/SocialLogos/x.png">
                <p id="socialLabel">X</p>
            </div>
            <div id="socialLinksMiniBox">
                <img id="socialLogo" src="https://my-circle.io/OtherFiles/SocialLogos/tiktok.png">
                <p id="socialLabel">TikTok</p>
            </div>
        </div>
    </div>
    </body>
    </html>

>Solution :

It’s using relative positioning, but not in any meaningful way. It’s basically part of the flow of the other elements in that same <div>, and it’s "below" them and overflowing below the <div>.

You can change the <div> to use relative positioning, then change the button to use absolute positioning therein:

html,body,#container {
    background-color: rgb(230,230,230);
    margin:0px;
    padding:0px;
}

#container {
    position: relative;
}

#spaceBox {
    background-color: rgba(0,0,0,0.0);
    width: 80%;
    max-width: 800px;
    height: 30px;
    top:0px; bottom:0px; left:0px; right:0px;
    margin: auto;
    border-radius: 25px;
}

#socialLinksContainerBox {
    background-color: white;
    width: 80%;
    max-width: 800px;
    height: 125px;
    top:0px; bottom:0px; left:0px; right:0px;
    margin: auto;
    border-radius: 25px;
    text-align: center;
    overflow:hidden;
    white-space: nowrap;
}

#socialLinksMiniBox {
    background-color: rgb(240,240,240);
    width: calc(100% / 7);  
    height: 43%;
    display: inline-block;
    vertical-align: top;   
    text-align:center;
    margin:2%;    
    padding:20px;
    border-radius: 25px;
    position: relative; /* <--- here */
}

#socialLogo {
    width: 40px;
    height: 40px;
}

#socialLabel {
    position: relative;
    width: 100%;
    height: 40px;
    font-size: 15px;
    font-family: 'HelveticaNeue';
    bottom: 12px;
    text-align: center;
}

#socialButtonOne {
    position: absolute; /* <--- and here */
    width: 100%;
    height: 100%;
    margin: auto;
    top:0px; bottom:0px; left:0px; right:0px;
    z-index: 100;
    display: block;
}

<div id="container">
    <div id="spaceBox"></div>
    <div id="socialLinksContainerBox">
        <div id="socialLinksMiniBox">
            <img id="socialLogo" src="https://my-circle.io/OtherFiles/SocialLogos/instagram.png">
            <p id="socialLabel">Instagram</p>
            <button id="socialButtonOne" type="button" onclick="alert('Hello world!')">Click Me!</button>
        </div>
        <div id="socialLinksMiniBox">
            <img id="socialLogo" src="https://my-circle.io/OtherFiles/SocialLogos/youtube.png">
            <p id="socialLabel">YouTube</p>
        </div>
        <div id="socialLinksMiniBox">
            <img id="socialLogo" src="https://my-circle.io/OtherFiles/SocialLogos/x.png">
            <p id="socialLabel">X</p>
        </div>
        <div id="socialLinksMiniBox">
            <img id="socialLogo" src="https://my-circle.io/OtherFiles/SocialLogos/tiktok.png">
            <p id="socialLabel">TikTok</p>
        </div>
    </div>
</div>