CODEWITHSUNDEEP
javascriptjquerycsshtml
Mostafa Makmouk
Mostafa Makmouk

Reputation: 43

How to place an HTML element over another using CSS

I have a slider that I want to place an small icon over it using HTML and CSS, but both are position absolute and the slider is hiding the icon.

The CSS code for the icon is this:

#nav {  
    position:absolute;
    left: 49%;
    top: 89%;
}

Note that when I remove the slider from the javascript file, it shows the icon as I want but the sliders stop, so how can the icon get placed over the slider

Upvotes: 2

Views: 556

Answers (4)

Gaurav Agarwal
Gaurav Agarwal

Reputation: 883

Apply more Z-index to your small icon more than your slider image!

.slider{
 z-index: 100; }

.small-icon{ z-index: 200; }

Its all trick of Z-index!

Upvotes: 0

Sandeep Pattanaik
Sandeep Pattanaik

Reputation: 632

Sliders having predefined z-index property. So you need to add higher z-index property to your icon.

#nav {  
    position:absolute;
    left: 49%;
    top: 89%;
    z-index:/* As per you requirment */;
}

Upvotes: 0

mg_dev
mg_dev

Reputation: 1403

This is what you need-
http://jsfiddle.net/LUQjb/3/

HTML- 

<div class="outerdiv">
<div class="youricon">
</div></div>

CSS- 

.outerdiv{  
    position:relative;  
    width:400px;  
    height:400px;  
    background-color:black;  
}  

.youricon{  
    position:absolute;  
    width:200px;  
    height:200px;  
    background-color:red;  
    top:50px;  
    left:50px;  
}

Upvotes: 0

Suresh Ponnukalai
Suresh Ponnukalai

Reputation: 13998

Add z-index for this nav icon. Update your CSS like below.

#nav {  
position:absolute;
left: 49%;
top: 89%;
z-index:2;
}

Upvotes: 1

Related Questions