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 to manipulate the CSS at runtime

    How to put CSS content in select box and rotate it?

    How to select the first occurrence of an HTML element in CSS that does not have a specific class?

    How to align p tag side by side using css?

    how to use auto with a height in css

    How to create a box having border top width more than content at different browser display size?

    Avoid children to interfer with the parents hover. (or how to .stop(false,true) a css transition)

    How can I compute a percentage based margin with LESS css?

    How can I float divs so that they expand past their container?

    How to avoid this hardcoded index.js when use webpack?

    How do I style just the thumbnail image in this post?

    Show an image from b&w to color as if it were loading (left to right)

    Why does my progress bar shows full progress value before it start loading

    How to hardware accelerate a box-shadow animation in CSS?

    How to set CSS rules for input, except one type

    How do I put a clear button inside my HTML text input box like the iPhone does?

    How to display last div at top using CSS?

    How to upload image to an existing image src in angularjs, css

    CSS: How to create a lines or dots over a background image? [closed]

    How to fix too long css dropdown in Foundation 4 top bar?

    HTML4 strict: border=“0” is deprecated, how to replace it

    How to flip background image using CSS?

    How to apply bootstrap css to all buttons

    How to fix crispy text in Safari 5 Mac OS X after using css 3d transforms?

    How do I remove Bootstrap from asp.net project?

    How to override font-size (em) in this condition?

    How to make the background image responsive

    how to collapse width of parent element to total width of child elements

    How can I “hack” the Thunderbird Lightning extension to fully color categories

    How to change color of footer? (Materialize)