How come the image shows on jsfiddle, but it won't show on blogger?

[asasass]

How come the image shows on jsfiddle, but it won’t show on blogger?

Edit fiddle - JSFiddle - Code Playground

Blogger
https://testpage34567.blogspot.com/

<style>
  #playButton2 {
    width: 180px;
    height: 180px;
    cursor: pointer;
    border: 1px solid #0059dd;
    position: relative;
  }
  
  #playButton2 svg {
    position: absolute;
    z-index: -1;
  }
  
  .button div:hover {
    border: 1px solid red;
  }
  
  .button div {
    width: 36px;
    height: 36px;
    margin: 69px 71px;
    background-color: rgba(0, 0, 0, .7);
    background-size: 14px 18px;
    background-repeat: no-repeat;
    border-radius: 50%;
    border: 1px solid white;
  } 

  .initial{
    background-image: url('https://i.imgur.com/Lj57czy.png');
    background-position: 58% 50%;
  }

  
  .pause {
    background-image: url('https://i.imgur.com/LgmfKda.png');
    background-position: 50%;
    display: none;
  }
  
  .play {
    background-image: url('https://i.imgur.com/Lj57czy.png');
    background-position: 58% 50%;
    display: none;
  }


</style>

<div id="playButton2" onclick=" 
var button = document.getElementById('playButton2');
var player = document.getElementById('player2');
button.querySelector('.initial').style.display='none';
button.querySelector('.pause').style.display='none';
button.querySelector('.play').style.display='none';
player.volume=1.0; if (player.paused) {
button.querySelector('.pause').style.display='inline-block';
player.play();
} else {
button.querySelector('.play').style.display='inline-block';
player.pause();
}">

    <svg width="180" height="180">

  <defs>
        <clippath id="circleView">


      <circle cx="90" cy="90" r="85" fill="orange" />
        </circle></clippath>
    </defs>

<image width="180" height="180" xlink:href="https://i.imgur.com/uuqDlZB.jpg" clip-path="url(#circleView)" />

   <image width="180" height="180" xlink:href="http://i.imgur.com/4HJbzEq.png" />


   
    </image></image></svg>

    <div class="button">
        <div class="initial"> </div>
        <div class="pause"> </div>
        <div class="play"> </div>
    </div>

</div>

<audio id="player2" style="display:none;">
  <source src='http://hi5.1980s.fm/;' type='audio/mpeg'></source>
</audio>

[ronpat]

try this

  #playButton2 svg {
    position: absolute;
/*    z-index: -1; */
  }

[asasass]

Removing: z-index: -1;

That removed the playbutton:
https://testpage34567.blogspot.com/

Edit fiddle - JSFiddle - Code Playground

[ronpat]

Is it remotely possible that you have changed your code otherwise from that which you initially posted?

Edit fiddle - JSFiddle - Code Playground

[asasass]

You told me to remove z-index: -1;, correct?

[asasass]

This is with z index turned on.

Edit fiddle - JSFiddle - Code Playground

This is with z index turned off.

Edit fiddle - JSFiddle - Code Playground

[ronpat]

Probably my mistake, asasass. Why don’t you restore the negative z-index.

[asasass]

Then I get this: Only on blogger.
https://testpage34567.blogspot.com/

[PaulOB]

@asasass

How come the image shows on jsfiddle, but it won’t show on blogger?

Because on blogger .main-inner .widget has a background-color applied and your negative z-index puts the image under the background color. Rather than using negative indexes you can usually stack positioned element more positively (in both senses of the word).

e.g.

#playButton2 svg{z-index:0}
#playButton2 .button {position:relative;z-index:2;}

Or remove the background from .main-inner .widget if you are not using it.

.main-inner .widget{background:transparent;}

[asasass]

I added:

#playButton2 svg{z-index:0}
#playButton2 .button {position:relative;z-index:2;}

And I still see this.
http://www.sitepoint.com/community/uploads/short-url/eMtDCkWUBd4rPwt5fAm1OBDtyXe.png

https://testpage34567.blogspot.com/

<style>

#playButton2 svg{z-index:0}
#playButton2 .button {position:relative;z-index:2;}



  #playButton2 {
    width: 180px;
    height: 180px;
    cursor: pointer;
    border: 1px solid #0059dd;
    position: relative;
  }
  
  #playButton2 svg {
    position: absolute;
z-index: -1;
  }
  
  .button div:hover {
    border: 1px solid red;
  }
  
  .button div {
    width: 36px;
    height: 36px;
    margin: 69px 71px;
    background-color: rgba(0, 0, 0, .7);
    background-size: 14px 18px;
    background-repeat: no-repeat;
    border-radius: 50%;
    border: 1px solid white;
  } 

  .initial{
    background-image: url('https://i.imgur.com/Lj57czy.png');
    background-position: 58% 50%;
  }

  
  .pause {
    background-image: url('https://i.imgur.com/LgmfKda.png');
    background-position: 50%;
    display: none;
  }
  
  .play {
    background-image: url('https://i.imgur.com/Lj57czy.png');
    background-position: 58% 50%;
    display: none;
  }


</style>

<div id="playButton2" onclick=" 
var button = document.getElementById('playButton2');
var player = document.getElementById('player2');
button.querySelector('.initial').style.display='none';
button.querySelector('.pause').style.display='none';
button.querySelector('.play').style.display='none';
player.volume=1.0; if (player.paused) {
button.querySelector('.pause').style.display='inline-block';
player.play();
} else {
button.querySelector('.play').style.display='inline-block';
player.pause();
}">

    <svg width="180" height="180">

  <defs>
        <clippath id="circleView">


      <circle cx="90" cy="90" r="85" fill="orange" />
        </circle></clippath>
    </defs>

<image width="180" height="180" xlink:href="https://i.imgur.com/uuqDlZB.jpg" clip-path="url(#circleView)" />

   <image width="180" height="180" xlink:href="http://i.imgur.com/4HJbzEq.png" />


   
    </image></image></svg>

    <div class="button">
        <div class="initial"> </div>
        <div class="pause"> </div>
        <div class="play"> </div>
    </div>

</div>

<audio id="player2" style="display:none;">
  <source src='http://hi5.1980s.fm/;' type='audio/mpeg'></source>
</audio>

[chrisofarabia]

@asasass

#playButton2 svg{z-index:0}
#playButton2 .button {position:relative;z-index:2;}



  #playButton2 {
    width: 180px;
    height: 180px;
    cursor: pointer;
    border: 1px solid #0059dd;
    position: relative;
  }
  
  #playButton2 svg {
    position: absolute;
z-index: -1;
  }

You did, but you left the old CSS in place further down the <style> block and overrode it again.

[asasass]

You mean, just remove this?
z-index: -1;

And leave it as this.

  #playButton2 svg {
    position: absolute;
  }

Now it’s working.
https://testpage34567.blogspot.com/

[TechnoBear]

@TechnoBear

But when you’re posting here, or on JSFiddle, then you should use the correct code.

If you wish to draw attention to the fact that Blogger adds an incorrect closing tag, then make a note to that effect in your post, but at least ensure that your code is correct to start with.

Please.

[asasass]

I changed it to this:
And it works fine without the z-index.

Edit fiddle - JSFiddle - Code Playground

About: .button div
Should that be relative, or absolute?

But according to what you have.

#playButton2 svg {
    position: absolute;

#playButton2 .button {position:relative;

How can playButton2  be both relative / and absolute?

But, whatever you place on .button, that feeds the same code to the svg's.

<style>

  .button div{ width:37px;height: 37px;
    margin: 70px 72px;
    background-color:black;
    background-size: 14px 18px;
    background-repeat: no-repeat;
    border-radius: 50%;
    box-Shadow:inset 0 0 0 3px lime;
 position:relative;
  } 
</style>

<div id="playButton2" style="position:relative;background-image: linear-gradient( to right,transparent 86px,#0059dd 86px, #0059dd 89px, transparent 89px, transparent  177px, #0059dd 177px, #0059dd 180px, transparent 180px );border: 3px solid #0059dd; width: 266px; height: 180px;cursor: pointer;" onclick=" 
var button = document.getElementById('playButton2');
var player = document.getElementById('player2');
button.querySelector('.play').style.display='none';
button.querySelector('.pause').style.display='none';
player.volume=1.0; if (player.paused) {
button.querySelector('.pause').style.display='inline-block';
player.play();
} else {
button.querySelector('.play').style.display='inline-block';
player.pause();
}">

    <svg width="180" height="180" style="position: absolute;">

  <defs>
        <clippath id="circleView">
      <circle cx="90" cy="90" r="85" fill="orange" />
        </circle></clippath>
    </defs>

<image width="180" height="180" xlink:href="https://i.imgur.com/uuqDlZB.jpg" clip-path="url(#circleView)" />

   <image width="180" height="180" xlink:href="http://i.imgur.com/4HJbzEq.png" /></image></image></svg>

    <div class="button" >
        <div class="play" style="background-image: url('https://i.imgur.com/Lj57czy.png'); background-position: 58% 50%;"> </div>
        <div class="pause" style="background-image: url('https://i.imgur.com/LgmfKda.png');background-position: 50%;display: none;"> </div>
        
    </div>

</div>

<audio id="player2" style="display:none;">
  <source src='http://hi5.1980s.fm/;' type='audio/mpeg'>
</audio>