CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
kjw
kjw

Reputation: 1669

Can I make an anchor tag overlay another anchor tag?

I'm using Bootstrap 3's carousel and the right side carousel control is overlaying some paragraphs. Normally this isn't an issue. However a few slides have links in them and I would like for the user to still be able to click them.

Is it possible to set the z-index of the anchor tags (and only the anchor tags) in the paragraphs so that they are "higher" in the page than the carousel control?

Bootply with example code: http://www.bootply.com/6rOo9TcCNF

Thanks!

Upvotes: 5

Views: 937

Answers (2)

Jake Taylor
Jake Taylor

Reputation: 4336

Instead of changing the position of the carousel control icons, just change the width of your carousel-control to the width of the icons and it should fix your issue. So first remove:

.carousel-control .icon-next, .carousel-control .glyphicon-chevron-right {
    right:15%;
}
.carousel-control .icon-prev, .carousel-control .glyphicon-chevron-left {
    left:15%;

Then add; } .carousel-control {width:30px!important;} Here's the new bootply http://www.bootply.com/EMilPfoDoK

Upvotes: 1

user4563161
user4563161

Reputation:

I think you would be best to just reduce the width of carousel-control to something like 35px and give your slides a little extra padding so that the content is accessible to clicking.

Or

Another alternative would be to give your slide links a high z-index and try it out that way so that they overlap the carousel-control but that could itself poses some problems.

Upvotes: 2

Related Questions