Question

I'm trying to customize the placement of a close button for lightbox2 and I could use your help.

Currently, my close button appears over the lightbox image in the upper right as shown in my example on CodePen: http://codepen.io/xyzerb/pen/zryvmJ.

I need for the close button to appear on top of the image in the upper right as shown here: http://i.imgur.com/BNFdsO6.png.

Any ideas on what I'm doing wrong? I'm new to programming, but I didn't expect this part to be challenging.

Thank you in advance. Please let me know if there's anything that I can do to help you in return.

Please Ignore the Following Comment

/*! The system requires inclusion of a line of code if you link to CodePen, so I'm adding a comment. Please ignore. */

Answer 1

Add the following:

.lb-data .lb-close {
    position: relative;
    top: 18px;
    left: 18px;
    z-index: 999;
}

Answer 2

We can fix this by using css. Below css code will help you to fix.

.lb-dataContainer{ position:relative; }
.lb-closeContainer{ position: absolute; right: -11px; top: -8px; z-index: 11; }

Answer 3

这不是 Lightbox v2.11.3 的实际解决方案，但它有效。

.lightbox{
  display: flex;
  flex-direction: column-reverse;
}

因为它只是颠倒了列顺序。

Having trouble with positioning the Lightbox2 close button

3 个答案: