CODEWITHSUNDEEP
htmlcss
Bhushan Firake
Bhushan Firake

Reputation: 9448

Positioning elements on top of each other

I have a drop down that is concealed by the image as shown in the following image. I want the drop down to be on the top of the image. How can I do that?

Dropdown concealed by image part

Is it done through CSS?

Upvotes: 2

Views: 552

Answers (2)

NullPoiиteя
NullPoiиteя

Reputation: 57312

you can do this by putting greater z-index to dropdown

An element with greater stack order is always in front of an element with a lower stack order.

like 

img{
  z-index:5;
}

.dropdown{
   z-index:6;
}

Note: z-index only works on positioned elements (position:relative , position:absolute, or position:fixed).

.photo-thumb {
    margin-top: 20px;
    position: relative;
    width: 160px;
    z-index: 6;  <------- you have z-index 6 here 
}

and 

.menu ul {
    background: none repeat scroll 0 0 #1F2024;
    border-radius: 0 0 5px 5px;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 40px;
    transition: opacity 0.25s ease 0.1s;

    z-index: 7; <-----this is the key try z-index 7 here 
}

jsFiddle

Upvotes: 3

DavidB
DavidB

Reputation: 2596

Best way would be to make it a background image of an element rather than an actual image tag

Upvotes: 0

Related Questions