我的简单按钮有什么问题？

Question

I'm essentially trying to create a div which is an image of a button, and when the user clicks it a function is executed. For some reason the div is not showing up at all? What in the world am I setting wrong?

CSS:

#customizeButton
{
  background-image:url('images/customizeButton.png');
  position:absolute;
  top:35%;
  left:25%;
  width:370px;
  height:350px;
  background-repeat:no-repeat;
  -webkit-background-size:100% auto;
  z-index: 150;
}

HTML:

<div id ="customizeButton"></div>

It has to be something with the CSS side. I've got almost identical code for another "button" which I use as an exit button, but it uses a text character instead of an image. It works just fine...

Here's the code for reference:

CSS:

#statSheetExitButton
{
  width: 40px;
  height: 40px;
  position: absolute;
  font-weight: bold;
  top: 17%;
  left: 74%;
  font-size: 150%;
  font-style: normal;
  color: black;
  z-index: 50;
}

HTML:

<div id ="statSheetExitButton">X</div>

---

And again, the question is why the customizeButton is not showing up.

EDIT: ANSWER The problem was that I had the html code for my initial Stat Sheet components in another html file in the same folder, and my program was only listening to that file.

Answer 1

You are absolute positioning your element. Could you be positioning it on top of a relative positioned element that is causing it to be placed outside of the viewport of the browser screen. Use the inspector tools in Chrome, Firefox or Safari to find out where the div is . That'll get you on the right track.

Answer 2

Is this the correct path to your image?

background-image:url('customizeButton.png');

This would only work if the img was in the same directory as the css.

Answer 3

I think your div is empty so that,s why div is not showing, try to write some text or some thing else in div

Answer 4

My thoughts:

• display: block; missing
• you don't need background-repeat(nor -webkit-background-size), because you are giving it a height & width
• if you are only positioning this container, you do not need z-index

Answer 5

Make sure your button is inside a positioned element, which isn't itself hidden.