3

Hello :) i got a little "slider", as shown on the screenshot. Under it, there is a link which opens the related lightbox... the problem is, the invisible box (the blue one in the screenshot) is covering the thumnails of the slider, so i cant click them. How can i fix this?

The blue box is covering the thumbnails

The button: 

<label class="btn" for="modal-1">more...</label>

Css to it:

.btn {
cursor: pointer;
display: inline-block;
color: #000;
margin-top: 40vh;
margin-left: 30vw;
transform: rotate(-10deg);
z-index: 999999999;
Tobias Glaus
  • 3,008
  • 3
  • 18
  • 37
  • try `position: relative;` – Dejan.S Apr 15 '16 at 10:53
  • Check this it might help: http://stackoverflow.com/questions/14413658/placing-callouts-over-bootstrap-carousel – Roman Apr 15 '16 at 10:53
  • What if you give it a `width` and `height` and `absolute` position ? And no need to use such big values for `z-index` ;) – Vincent G Apr 15 '16 at 10:53
  • i tried 'position: relative' now and it just makes the "more..." disappear. same with 'position: absolute' :/ and when i tried width and height it just made a new "blue box" to the bottom right of the text and the biiig box to the top left stayed :/ – Tobias Glaus Apr 15 '16 at 11:08
  • @VincentG thank you for the tip with the z-index xD the z-index of the whole lightbox was like some billions and i just decreased it and it works now :D the only problem is that the lightbox, which shows up when i hit "more..." is behind the thumbnails :D but i think i'll get this to work – Tobias Glaus Apr 15 '16 at 11:20
  • @TobiasGlaus Glad to know it works now :) – Vincent G Apr 15 '16 at 11:44

1 Answers1

1

try adding position: relative;

.btn {
position: relative;
cursor: pointer;
display: inline-block;
color: #000;
margin-top: 40vh;
margin-left: 30vw;
transform: rotate(-10deg);
z-index: 999999999;
}
Dejan.S
  • 18,571
  • 22
  • 69
  • 112