Question 165197 in Wordpress Question posted in
The official Wordpress documentation can be found here.

Can one WordPress CSS element be overlaid over another?

Currently working on small wordpress site, and found one thing that i cant sort myself. I work on mobile version of site, and want to move two elements (title of page and cart icon) a little top of page.

enter image description here

i Have inserted this css:

.woodmart-shopping-cart {
 margin-top:-80px; // Inserted this
}

but element seems to be overlayed by other element:

enter image description here

tryed to put this:

.woodmart-shopping-cart {
position: relative;
z-index: 99;
margin-top: -80px;
overflow: visible;
}

But seems like no makes any change. Cart element is still overlayed by other element. Some help here?

EDIT:

After some directions from above, i set my css like this:

.container {
z-index:999;
position:relative;
}
.page-title.color-scheme-light .entry-title {
z-index:0;
margin-top:-60px;
}
.woodmart-cart-design-5 {
z-index:0;
}

but now seems like cart icon is not clickable like before, when you click it does nothing.

But dont see any change. Some tips?

Tags:

2

Answers


  1. 0

    As far I can see from only pics and no code, I think you are trying to place the shopping cart on top of your navbar div, right? If your navbar has position:relative, then .woodmart-shopping-cart’s position has to be: position:absolute. This way you can easily control your second element how to appear on top of the other.

    Login or Signup to reply.
  2. 0

    Try applying z-index: 1; on the card element icon and z-index: 0; on the other element.

    The object with z-index: 1; will be in front of the object with z-index: 0; but the objects have to be positioned with position

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search