close button with fixed positition not showing in safari (sidr menu)

Question

I am using the jquery plugin sidr to display pop windows, that all have a close button in the top corner overlaid on top of an image.

to keep the button in place I was using the css attribute:

position: fixed;

which works in chrome, but in FF the close button show up in the wrong place and in Safari it doesnt show up at all. changing it to:

position: absolute;

fixed the problem in FF but the button still doesn't show in Safari. with

position: relative;

the button shows but is then no longer in its correct position.

Help on resolving this issue would be much appreciated! Below is the full code.

html button:

<button id="close" type="button" onclick="$.sidr('close', 'blago');">X</button>

CSS:

    #close{
    position: relative;
    top: 0;
    margin: 15px;
    background: #000;
    background-color: Transparent;
  background-repeat:no-repeat;
  border: none;
  cursor:pointer;
  overflow: hidden;
}

Addition: if I put the button outside of the sidr div it does show up, any idea of wht the problem could be? — Hannes Andersson, Aug 25 '15 at 18:40

score 1 · Answer 1 · answered Aug 25 '15 at 18:53

1

Never mind, The problem was that left: 0; was not defined which apparently was needed for safari to diplay it in its correct position.

answered Aug 25 '15 at 18:53

Hannes Andersson

37
6

close button with fixed positition not showing in safari (sidr menu)

1 Answers1