CODEWITHSUNDEEP
javascripthtmlcssuser-interface
SwimmingG
SwimmingG

Reputation: 664

Display div over everything

I'm struggling to display a div on top of everything else.

I've followed other post on SO which say to use z-index and position: absolute.

Here is a screenshot to describe what I mean.

enter image description here

Here are the css attributes on the classes:

@media only screen and (min-width: 600px) {
  .cd-single-point .cd-more-info {
    position: absolute;
    width: 200px;
    height: 240px;
    padding: 1em;
    overflow-y: visible;
    z-index: 10;
    line-height: 1.4;
    border-radius: 0.25em;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  }
}

If anyone is able to help me I'd really appreciate it.

The link can be found here https://what-is-wrong-with-this-css.herokuapp.com/.

Thanks

Upvotes: 0

Views: 63

Answers (3)

Temani Afif
Temani Afif

Reputation: 272985

You have issue with overflow in the class .cd-image-wrapper, you need to make it visible like this :

.cd-image-wrapper {
    position: relative;
    overflow: visible;
    z-index: 2;
}

Upvotes: 1

astalor
astalor

Reputation: 290

  1. Try to increase the z-index to 9999
  2. Try to use !important (maybe something is overriding it)
  3. Try to decrease the z-index of the overlaping element (again try with !important)
  4. Try to change something obvious in your media query to make sure that it is currently executed, for example change the background color

Note: this is just to experiment and find the cause of your issue, using "!important" is not recommended

Upvotes: 0

Moe kanan
Moe kanan

Reputation: 189

Can you try and increase the z-index: 999;

Upvotes: 0

Related Questions