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 would you resize a image/gif in either CSS or HTML?

    How is the “travel mode” menu in Google Maps implemented?

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

    How to style the

    How to reduce the wiDth of dropdown-menu?

    How to move a CSS class below another? [closed]

    Bootstrap CSS - How to get control label with inline radios below it

    There is a little gap between the image and the overlay, I do not know how to fix it [duplicate]

    How to conditionally add css properties in jquery (coffeescript)

    How to add a CSS style to a specific node using Greasemonkey? [closed]

    How to override the height of parent node using CSS?

    How to override background-color for all classes using css?

    CSS - How to make if “Firefox, Safari, Opera and IE”?

    how to set width of a div in percentage minus certain pixels using javascript or css

    How to create this border styles in HTML/CSS? [closed]

    How to overlay an image inside an image with HTML, CSS

    How do I load a nested web page in a
    tag using only javascript and html?

    How can I apply jQuery .css style to descendant div [closed]

    How to identify unused css definitions [closed]

    How to Change HTML Tags Using Javascript

    How to alter hover effects for image button and embedded text?

    How to create a modal popup using javascript and CSS

    How to select html5 range's pseudo-elements in JavaScript

    Is it possible to show webpage in a window from my Chrome extension, only using JS, HTML and CSS?

    how to keep my slider horizontally centered?

    How to write css for a div under a div which specific id which is itself under a div with specific class?

    How to achieve this gradient using valid HTML & CSS only

    How to Trigger css animation both on scrolling down and up

    How to not apply CSS file on a
    ? (Without changing the original CSS file.)

    How to debug CSS in Android native browser?