How to place an HTML element over another using CSS


Tags: javascript,jquery,html,css,html5

Problem :

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



Solution :

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

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

    CSS Howto..

    How to make the background color transparent

    How to properly apply WinJS.Binding.Template ListView GridLayout CSS?

    How does the padding work in responsive CSS square?

    hide/show html div with javascript

    How to make Instagram.js feed responsive in Bootstrap?

    Using css modules, how can I use composes to include a list of variables for colors

    How do I disable the shadow only on one edge?

    Content shows up when clicked on the link

    How to measure the amount of time an animation took place using JavaScript

    How can I stop this ugly font smoothing with custom fonts in CSS?

    How to add TITLE and ALT to an background image (CSS Sprites)?

    CSS3 Transitions in Stylus - how to degrade for IE9

    How do I make my webpage scale-able depending on the size of the browser window?

    CSS - How can I set the content to attr() but when attribute isn't available, set it to 0 or another?

    How to deploy just HTML, CSS webpage to jetty?

    JavaScript, AngularJS: How do I know if element is larger than its container?

    How to pick with css multiple select tags that has at least one option selected?

    How to toggle overlay with no body scroll using the same button / div

    How to add multiple link styles on the same page?

    How to center a child div with a smaller parent div

    How to fix roll link in IE11

    How to align the overlay with the list of icons on hover- JS /CSS

    how i can make slideshow, get information(image, title , content) from database? [closed]

    How to make to border-bottom line longer with CSS

    How to properly add margin to elements inside bxSlider

    How do I get this CSS/jQuery menu to open only on click, rather than hover?

    How to center this stuff inside a link using CSS?

    How do i make my Jittery DropDown Menu stable?

    How to use Font Awesome 4.x CSS file with JSF? Browser can't find font files

    How can I style flexbox children in a multiline