html, css: How to cause a div be presented on top of other divs


Tags: html,css

Problem :

In facebook or likedin and many other sites there is search box in which you type in your search string and the results are presented right beneath it hiding everything else on this place as shown in the snapshot below taken from Likedin.

enter image description here

My question is how can this be done, how do I get this search div (or should it be something else than a div?) hide other parts of the page that appear to be at the same area on the page?

FWIW: some of my divs (that should be overridden) are defined as position:fixed.



Solution :

use z-index , z-index with higher number appear on top of lower z-index

for example #div-1 would appear on top since div-2 has no z-index(which default is either 0 or the z-index of the div's parent), and div-3 has a smaller z-index value. But div-3 would appear on top of div-2.

#div-1 {
    z-index: 3523;
}

#div-2 {
}

#div-3 {
    z-index: 29;
}

    CSS Howto..

    How can I align my adsense graphics?

    How to reach CSS zen?

    In javascript, jQuery, or css how do I get a div or iframe to expand to fill rest of space

    How to dynamically import javascript and css files

    How is BBC changing colours based on temperature? CSS?

    CSS how to postiton div outside main container without it moving over the container on window re-size? [closed]

    How to use Bootstrap CDN?

    How to copy (or reflect instantly) CSS edited on Inspected elements on the browser to the actual css file?

    How to get css3 multi-column count in Javascript

    How detect first div clicked when all of them absolute

    How to use setInterval

    How to let css selector exclude an element?

    How can I hide a div completely from HTML DOM?

    How to design “overflowing” border lines of css
    ?

    jQuery hide/show issue with offset

    How to keep a diagonal running background animation without rotating the div?

    How to put two divs on the same line with CSS in simple_form in rails?

    How to have multiple css print layouts on a single page application?

    How to fast-blur in css/js?

    How do I align an image within a pan/hover border/box?

    How to move image slowly with animation when appending the image to tag

    How to convert external css properties to inline property? [closed]

    How to make animation smooth

    how to position two transparent images to overlap opposite corners of a container div

    How to add css to my page via Git Hub raw?

    How do I keep the 'hover' effect while using a Jquery color change effect while scrolling

    How to render no-table HTML form into two columns with CSS using classes?

    how decrease font size?

    How do I get a div to fill the width regardless if the brower window is shrunk?

    How I can change the CSS properties of HTML elements in run time using JavaScript or PHP?