CSS Positioning driving me crazy for 10 hours

HTML : 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="main">
        <div id="votingwindow">
            <div class="votequestion">Lorem ipsum dox archeriores. Laboriosamque dolorum!</div>

            <button id="voteanswer1" onclick="button1()"><p id="answerOne">Ans1</p></button>
            <button id="voteanswer2" onclick="button2()"><p id="answerTwo">Ans2</p></button>
            <button id="voteanswer3" onclick="button3()"><p id="answerThree">Ans2</p></button>
            <button id="voteanswer4" onclick="button4()"><p id="answerFour">Ans2</p></button>
            
            

        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>

CSS :
.main {
    width: 100vw;
    height: 100vh;
    background-color: #1f5673;
    margin: 0px;
    padding: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    
}
#votingwindow {
    width: 500px;
    height: 400px;
    background-color: #d4cdf4;
    
}
.votequestion {
    background-color: #6290c3;
    width: 99%;
    height: 20%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1%;
    display: flex;
    justify-content: center;
    align-items: center;
}





/* VOTE ANSWERS !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */
#voteanswer1 {
    background-color: #b5e2fa;
    width: 88%;
    height: 15%;
    margin-left: auto;
    margin-right: auto;
    margin-top:2%;
    margin-bottom: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
}

#voteanswer2 {
    background-color: #b5e2fa;
    width: 88%;
    height: 15%;
    margin-left: auto;
    margin-right: auto;
    margin-top:2%;
    margin-bottom: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
}

#voteanswer3 {
    background-color: #b5e2fa;
    width: 88%;
    height: 15%;
    margin-left: auto;
    margin-right: auto;
    margin-top:2%;
    margin-bottom: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
}

#voteanswer4 {
    background-color: #b5e2fa;
    width: 88%;
    height: 15%;
    margin-left: auto;
    margin-right: auto;
    margin-top:2%;
    margin-bottom: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
}
/* VOTE ANSWERS !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */

JAVASCRIPT :




var clicks1 = 0;
var clicks2 = 0;
var clicks3 = 0;
var clicks4 = 0;


var rel1;
var rel2;
var rel3;
var rel4;
var sumOfVotes;
var onePercent;


// FUNCTION 1 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
function button1() {
    
    clicks1 += 1;
    sumOfVotes = clicks1 + clicks2 + clicks3 + clicks4;
    onePercent = sumOfVotes / 100;
    rel1 = Math.round((clicks1 / onePercent)*100)/100;
    rel2 = Math.round((clicks2 / onePercent)*100)/100;
    rel3 = Math.round((clicks3 / onePercent)*100)/100;
    rel4 = Math.round((clicks4 / onePercent)*100)/100;

    

    document.getElementById("voteanswer1").innerHTML = clicks1 + " votes    " + rel1 + "%";
    document.getElementById("voteanswer2").innerHTML = clicks2 + " votes    " + rel2 + "%";
    document.getElementById("voteanswer3").innerHTML = clicks3 + " votes    " + rel3 + "%";
    document.getElementById("voteanswer4").innerHTML = clicks4 + " votes    " + rel4 + "%";

    // document.getElementById("voteanswer1").style.position = "absolute";
    // document.getElementById("voteanswer2").style.position = "absolute";
    // document.getElementById("voteanswer3").style.position = "absolute";
    // document.getElementById("voteanswer4").style.position = "absolute";

    document.getElementById("voteanswer1").style.zIndex = "1";
    document.getElementById("voteanswer2").style.zIndex = "1";
    document.getElementById("voteanswer3").style.zIndex = "1";
    document.getElementById("voteanswer4").style.zIndex = "1";

    var div = document.createElement("div");
    document.getElementById("answerOne").appendChild(div);
    div.style.position = "absolute";
    div.style.left = 0;
    div.style.width = rel1 + "%";
    div.style.height = "120px";
    div.style.backgroundColor = "#9fd6f5";
    div.style.zIndex = "0";

    var div = document.createElement("div");
    document.getElementById("answerTwo").appendChild(div);
    div.style.position = "absolute";
    div.style.left = 0;
    div.style.width = rel2 + "%";
    div.style.height = "120px";
    div.style.backgroundColor = "#9fd6f5";
    div.style.zIndex = "0";


    var div = document.createElement("div");
    document.getElementById("answerThree").appendChild(div);
    div.style.position = "absolute";
    div.style.left = 0;
    div.style.width = rel3 + "%";
    div.style.height = "120px";
    div.style.backgroundColor = "#9fd6f5";
    div.style.zIndex = "0";


    var div = document.createElement("div");
    document.getElementById("answerFour").appendChild(div);
    div.style.position = "absolute";
    div.style.left = 0;
    div.style.width = rel4 + "%";
    div.style.height = "120px";
    div.style.backgroundColor = "#9fd6f5";
    div.style.zIndex = "0";

    
    
}
// FUNCTION 1 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

// FUNCTION 2 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
function button2() {
    
    clicks2 += 1;
    sumOfVotes = clicks1 + clicks2 + clicks3 + clicks4;
    onePercent = sumOfVotes / 100;
    rel1 = Math.round((clicks1 / onePercent)*100)/100;
    rel2 = Math.round((clicks2 / onePercent)*100)/100;
    rel3 = Math.round((clicks3 / onePercent)*100)/100;
    rel4 = Math.round((clicks4 / onePercent)*100)/100;



    document.getElementById("voteanswer1").innerHTML = clicks1 + " votes    " + rel1 + "%";
    document.getElementById("voteanswer2").innerHTML = clicks2 + " votes    " + rel2 + "%";
    document.getElementById("voteanswer3").innerHTML = clicks3 + " votes    " + rel3 + "%";
    document.getElementById("voteanswer4").innerHTML = clicks4 + " votes    " + rel4 + "%";



    var div = document.createElement("div");
    document.getElementById("voteanswer1").appendChild(div);
    div.style.position = "absolute";
    div.style.left = 0;
    div.style.width = rel1 + "%";
    div.style.height = "120px";
    div.style.backgroundColor = "#9fd6f5";

    var div = document.createElement("div");
    document.getElementById("voteanswer2").appendChild(div);
    div.style.position = "absolute";
    div.style.left = 0;
    div.style.width = rel2 + "%";
    div.style.height = "120px";
    div.style.backgroundColor = "#9fd6f5";

    var div = document.createElement("div");
    document.getElementById("voteanswer3").appendChild(div);
    div.style.position = "absolute";
    div.style.left = 0;
    div.style.width = rel3 + "%";
    div.style.height = "120px";
    div.style.backgroundColor = "#9fd6f5";

    var div = document.createElement("div");
    document.getElementById("voteanswer4").appendChild(div);
    div.style.position = "absolute";
    div.style.left = 0;
    div.style.width = rel4 + "%";
    div.style.height = "120px";
    div.style.backgroundColor = "#9fd6f5";
    
}
// FUNCTION 2 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

// FUNCTION 3 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
function button3() {
    
    clicks3 += 1;
    sumOfVotes = clicks1 + clicks2 + clicks3 + clicks4;
    onePercent = sumOfVotes / 100;
    rel1 = Math.round((clicks1 / onePercent)*100)/100;
    rel2 = Math.round((clicks2 / onePercent)*100)/100;
    rel3 = Math.round((clicks3 / onePercent)*100)/100;
    rel4 = Math.round((clicks4 / onePercent)*100)/100;



    document.getElementById("voteanswer1").innerHTML = clicks1 + " votes    " + rel1 + "%";
    document.getElementById("voteanswer2").innerHTML = clicks2 + " votes    " + rel2 + "%";
    document.getElementById("voteanswer3").innerHTML = clicks3 + " votes    " + rel3 + "%";
    document.getElementById("voteanswer4").innerHTML = clicks4 + " votes    " + rel4 + "%";

    

    var div = document.createElement("div");
    document.getElementById("voteanswer1").appendChild(div);
    div.style.position = "absolute";
    div.style.left = 0;
    div.style.width = rel1 + "%";
    div.style.height = "120px";
    div.style.backgroundColor = "#9fd6f5";

    var div = document.createElement("div");
    document.getElementById("voteanswer2").appendChild(div);
    div.style.position = "absolute";
    div.style.left = 0;
    div.style.width = rel2 + "%";
    div.style.height = "120px";
    div.style.backgroundColor = "#9fd6f5";

    var div = document.createElement("div");
    document.getElementById("voteanswer3").appendChild(div);
    div.style.position = "absolute";
    div.style.left = 0;
    div.style.width = rel3 + "%";
    div.style.height = "120px";
    div.style.backgroundColor = "#9fd6f5";

    var div = document.createElement("div");
    document.getElementById("voteanswer4").appendChild(div);
    div.style.position = "absolute";
    div.style.left = 0;
    div.style.width = rel4 + "%";
    div.style.height = "120px";
    div.style.backgroundColor = "#9fd6f5";
    
}
// FUNCTION 3 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

// FUNCTION 4 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
function button4() {
    
    clicks4 += 1;
    sumOfVotes = clicks1 + clicks2 + clicks3 + clicks4;
    onePercent = sumOfVotes / 100;
    rel1 = Math.round((clicks1 / onePercent)*100)/100;
    rel2 = Math.round((clicks2 / onePercent)*100)/100;
    rel3 = Math.round((clicks3 / onePercent)*100)/100;
    rel4 = Math.round((clicks4 / onePercent)*100)/100;



    document.getElementById("voteanswer1").innerHTML = clicks1 + " votes    " + rel1 + "%";
    document.getElementById("voteanswer2").innerHTML = clicks2 + " votes    " + rel2 + "%";
    document.getElementById("voteanswer3").innerHTML = clicks3 + " votes    " + rel3 + "%";
    document.getElementById("voteanswer4").innerHTML = clicks4 + " votes    " + rel4 + "%";

    

    var div = document.createElement("div");
    document.getElementById("voteanswer1").appendChild(div);
    div.style.position = "absolute";
    div.style.left = 0;
    div.style.width = rel1 + "%";
    div.style.height = "120px";
    div.style.backgroundColor = "#9fd6f5";

    var div = document.createElement("div");
    document.getElementById("voteanswer2").appendChild(div);
    div.style.position = "absolute";
    div.style.left = 0;
    div.style.width = rel2 + "%";
    div.style.height = "120px";
    div.style.backgroundColor = "#9fd6f5";

    var div = document.createElement("div");
    document.getElementById("voteanswer3").appendChild(div);
    div.style.position = "absolute";
    div.style.left = 0;
    div.style.width = rel3 + "%";
    div.style.height = "120px";
    div.style.backgroundColor = "#9fd6f5";

    var div = document.createElement("div");
    document.getElementById("voteanswer4").appendChild(div);
    div.style.position = "absolute";
    div.style.left = 0;
    div.style.width = rel4 + "%";
    div.style.height = "120px";
    div.style.backgroundColor = "#9fd6f5";
    
}
// FUNCTION 4 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
  

Hi everyone.
Here the full code.
I want the color box div to go beneath the text that is shown inside the button box, but the color div box just jumps over it.
I tried z-index, maybe the wrong way.
Tried positioning relative/absolute, maybe the wrong way.
Anyone any suggestions ? I’m starting getting nuts with this.
In an exercise before, i gave a positioning absolute value to two equal children, and a relative to their parent: so the div color box went under the text.
But here, I don’t know why it just wont work.

You people have a nice day, I m going to the nut house…

I don’t think I understand what you want to do. There is a colored box at the top with the content “Lorem ipsum dox archeriores. Laboriosamque dolorum!” in it. And then there are four buttons below that aligned vertically. Where exactly do you want the colored box with text to go? Below all the buttons?

just copy my whole code, run it, and click on one of the 4 buttons many times, you will see, a bar starts filling with a new color from the left ( a new div ), but when it comes to the mid it wont fall below the text, as I want it to, but it overrides the text

Ya, sorry, I’m not seeing the issue or I just don’t understand what you are trying to tell me. Maybe someone else will have better luck?

Have you tried to set a negative value to the div that you are creating with java script?

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.