position:relative not working when added through javascript

Question

I am trying to place an svg over an image using javascript. However, the position:relative style isn't working. I think it might be due to the style getting overwritten by the style sheet. Is there something im missing?

function button() {
    var evenPic = document.querySelectorAll("#userList li:nth-child(even) .avatar");
    for (var i = 0; i < evenPic.length; i++) {
        var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");

        svg.setAttribute("width", "100");
        svg.setAttribute("height", "100");
        svg.setAttribute("position", "absolute");
        svg.setAttribute("top", "0");
        svg.setAttribute("left", "0");
        svg.setAttribute("fill", "yellow");
        svg.setAttribute("opacity", "0.5");
        var circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
        circle.setAttribute("cx", "30");
        circle.setAttribute("cy", "45");
        circle.setAttribute("r", "31");
        svg.appendChild(circle);
        evenPic[i].appendChild(svg);

    }
}

#container {
    max-width: 400px;
}

header {
    text-transform: uppercase;
    padding-left: 7%
}

ol {
    list-style: none;
}

ol li {
    max-width: 400px;
}

.user {
    margin: 20px;
    padding-left: 20%;
    font-family: arial;
}

.name {
    /*font-weight: bold;*/
    font-size: 120%;
    margin-bottom: 10px;
}

.status {
    font-size: 110%;
    /*font-weight: bold;*/
    margin-bottom: 10px;
}

.avatar {
    position: relative;
}

.avatar img {
    width: 17%;
    padding-top: 4%;
    float: left;
}

<div id="container">
    <header>
        Recent Conversations
    </header>
    <ol id="userList">
        <li>
            <div class="avatar">

                <img src="https://upload.wikimedia.org/wikipedia/commons/7/7e/Circle-icons-profile.svg">
            </div>

            <div class="user">
                <div class="name">
                    Finn
                </div>
                <div class="status">
                    I'm a big deal
                </div>
                <div class="message">
                    Listen I've had a pretty messed...
                </div>
                <hr>
            </div>
        </li>
        <li>
            <div class="avatar">
                <img src="https://upload.wikimedia.org/wikipedia/commons/7/7e/Circle-icons-profile.svg">
            </div>
            <div class="user">
                <div class="name">
                    Finn
                </div>
                <div class="status">
                    I'm a big deal
                </div>
                <div class="message">
                    Listen I've had a pretty messed...
                </div>
                <hr>
            </div>

        </li>
        <li>
            <div class="avatar">
                <img src="https://upload.wikimedia.org/wikipedia/commons/7/7e/Circle-icons-profile.svg">
            </div>
            <div class="user">
                <div class="name">
                    Finn
                </div>
                <div class="status">
                    I'm a big deal
                </div>
                <div class="message">
                    Listen I've had a pretty messed...
                </div>
                <hr>
            </div>

        </li>
    </ol>
    <div id="buttons">
        <button id="btn" onclick="button()">Button</button>
    </div>
</div>

With this code, the svg image is created next to the avatar. Is there a way to create it on top of the avatar?

score 2 · Accepted Answer · answered Apr 23 '19 at 08:55

2

svg.setAttribute("position", "absolute");

position isn't an HTML or SVG attribute, it is a CSS property

svg.style.position = "absolute";

answered Apr 23 '19 at 08:55

Quentin

914,110
126
1,211
1,335

Great input, missed that in his SVG attributes – Jake Apr 23 '19 at 09:04
thank you! i didnt know position is an svg property, thank you for the correction – user11204605 Apr 23 '19 at 09:16
@user11204605 — **CSS** not SVG. – Quentin Apr 23 '19 at 09:18

Jake · Answer 2 · 2019-04-23T09:02:14.563

Simply add this CSS to .avatar svg :

position: absolute;
left: 0;

Since position: relative is set on your avatar, your SVG will be placed over it.

You could actually do this using CSS only instead of an SVG (simply by creating a yellow circle and placing it over it using the code below) :

<!DOCTYPE html>
<html>

<head>
<style>
    #container {
        max-width: 400px;
    }
    header {
        text-transform: uppercase;
        padding-left: 7%
    }
    ol {
        list-style: none;
    }
    ol li {
        max-width: 400px;
    }
    .user {
        margin: 20px;
        padding-left: 20%;
        font-family:arial;
    }
    .name {
        /*font-weight: bold;*/
        font-size: 120%;
        margin-bottom: 10px;
    }
    .status {
        font-size: 110%;
        /*font-weight: bold;*/
        margin-bottom: 10px;
    }
    .avatar {
        position:relative;
    }
    
    .avatar:after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      border-radius: 50%;
      background: yellow;
      
      /* Using the same width and float as your image */
      /* Forced to set a height using pixels since its parent has no height */
      
      float: left;
      width: 17%;
      margin-top: 4%;
      height: 62px;
      
      opacity: 0;
      transition: opacity 300ms;
    }
    
    .avatar.active:after {
      opacity: 0.5;
    }
    
    .avatar img {
        width: 17%;
        padding-top:4%;
        float: left;
    }
</style>    

</head>

<body>
    <div id = "container">
        <header>
            Recent Conversations
        </header>
        <ol id = "userList">
            <li>
                <div class = "avatar">

                    <img src="https://upload.wikimedia.org/wikipedia/commons/7/7e/Circle-icons-profile.svg">
                </div>

                <div class = "user">
                  <div class = "name">
                      Finn
                  </div>
                  <div class = "status">
                      I'm a big deal
                  </div>
                  <div class = "message">
                      Listen I've had a pretty messed...
                  </div>
                  <hr>
                </div>
            </li>
            <li>
                <div class = "avatar">
                    <img src="https://upload.wikimedia.org/wikipedia/commons/7/7e/Circle-icons-profile.svg">
                </div>
                <div class = "user">
                  <div class = "name">
                      Finn
                  </div>
                  <div class = "status">
                      I'm a big deal
                  </div>
                  <div class = "message">
                      Listen I've had a pretty messed...
                  </div>
                  <hr>
                </div>

            </li>
            <li>
                <div class = "avatar">
                    <img src="https://upload.wikimedia.org/wikipedia/commons/7/7e/Circle-icons-profile.svg">
                </div>
                <div class = "user">
                  <div class = "name">
                      Finn
                  </div>
                  <div class = "status">
                      I'm a big deal
                  </div>
                  <div class = "message">
                      Listen I've had a pretty messed...
                  </div>
                  <hr>
                </div>

            </li>
        </ol>
        <div id = "buttons">
          <button id="btn" onclick="button()">Button</button>
        </div>
    </div>

</body>

<script>
    function button(){
        var evenPic = document.querySelectorAll("#userList li:nth-child(even) .avatar");
        for(var i=0; i<evenPic.length; i++){
            evenPic[i].classList.add("active");
        }
    }
</script>

</html>

thank you! this in addition to Quentin's answer worked! – user11204605 Apr 23 '19 at 09:16 — user11204605, Apr 23 '19 at 09:16

position:relative not working when added through javascript

2 Answers2