1

I have a button element with a class that has position="absolute". This is preventing the button from being clicked. As soon as I remove the position absolute, the positioning of the button changes to where I don't want it, but the clicking works. The z-index=-1 was intended bc the button lays over another component. How do I get it to keep position absolute AND clickable?

<button type="button" onclick="RandomFunction()" class="b-Crown"></button>

.b-Crown {
    cursor: pointer;
    padding-left: 25px;
    margin: auto;
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
    width: 15px;
    height: 26px;
    top: -163px;
    left: 265px;
    border-radius: 5px;
    background: #999;
    border-right: 2px solid rgba(0, 0, 0, 0.05);
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}
Maurizio L
  • 43
  • 1
  • 6
  • 3
    Remove your `z-index: -1;` ... or make it go on top instead of to bottom. And the reason is positioning, that kicks in when an element is not `static`, the default. – Asons Jan 05 '19 at 19:59
  • 1
    @LGSon is it due to `position:absolute` which makes the object appear on top/front of the other and `z-index:-1`makes this positioning back again from front. – Himanshu Jan 05 '19 at 20:11
  • 1
    @HimanshuAhuja Yes, as `z-index` doesn't work if the element doesn't have a `position` other than `static` (or being a flex/grid item) – Asons Jan 05 '19 at 20:12
  • Thank you! The z-index:-1; was on purpose. I wanted this button to be position behind another component. If I change the z-index to 1, I can make a work around and adjust the width to still be able to just see the part I wanted to be displayed. Thank again! – Maurizio L Jan 05 '19 at 20:15
  • I have never used `flex` but someway or the other have seen the effect of flex as if the overflow lookalike reaches some optimum flex cuts and displays it inline not sure about flex – Himanshu Jan 05 '19 at 20:16

3 Answers3

3

Change "z-index: -1" to "z-index: 1"

Ram Ghadiyaram
  • 28,239
  • 13
  • 95
  • 121
Mandeep Singh
  • 39
  • 2
  • 7
    Welcome to SO. Don't just drop _"change this to that"_ answers, also explain why it works. – Asons Jan 05 '19 at 20:10
0

I guess due to position:absolute which makes the object appear on top/front of the other and at the same time you are using z-index:-1 which makes this positioning back again from front. so remove z-index if you want the object in front/top else remove position:absolute to make it behind the other object

Note: the other object should not be static. It depends on the other objects behaviour you have styled as well.

Himanshu
  • 3,830
  • 2
  • 10
  • 29
  • You can't just say like this, as you don't know what the other element has when it comes to both `position` and `z-index`. Read the first dupe link, it explain how it all works – Asons Jan 05 '19 at 20:25
  • So, you are saying if the other object has some positioning defined then absolute will work else static no change like you need to have position:relative to work in sync – Himanshu Jan 05 '19 at 20:29
  • Please read the first dupe link's answer, it explains is well. – Asons Jan 05 '19 at 20:35
  • thats correct what i said @LGSon I've read the dupe answer in order to see z-index to take effect you need to have positioning as absolute for the one and opposit relative for the other otherwise theres no point of having only zindex:-1 for the one and +1 for the other – Himanshu Jan 05 '19 at 20:40
0

z-index doesn't work on static that's why your button was only clickable if you made the position absolute simply you can remove the z-index or change the position to fixed or relative

Definition and Usage

The z-index property specifies the stack order of an element.

An element with greater stack order is always in front of an element with a >lower stack order.

Note : z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).

Community
  • 1
  • 1
Abdelillah Aissani
  • 3,058
  • 2
  • 10
  • 25