How I can overlap a DIV on to other DIV?


Tags: html,css

Problem :

I am trying to make an overlapping a DIV onto other visually . I am trying

{
position:absolute;
top:-10px;
}

in css, but I found that this top attribute is not working properly in firefox. Dear fellas, how to do that? Please help me with some codes or examples. thx in advance



Solution :

Here's an easy way

CSS

.top {
    position: relative;
}
.topabs {
    position: absolute;
}

HTML

<div class='top'>
    <div class='topabs'>
        I'm the top div
    </div>
</div>
<div>No styles, just frowns :(</div>​

The relative positioned div collapses as there are no contents, causing the coordinates 0,0 coordinates of the absolute positioned div to be that of the div underneath.

Fiddle

http://jsfiddle.net/y5SzW/


    CSS Howto..

    How to Draw Kundli Design (diamonds and triangles in square) using HTML and CSS?

    CSS - how to place an error/hint message to the right of the input box

    How to style checkbox using CSS?

    How to style (increase the height) of select box in CSS?

    How to fit an image according to screen size

    How can I get the images in my carousel to center?

    how to remove the css given and get only the data from database using php

    How can I apply CSS to an HTML text input?

    Google chart - how to change a css property for the whole table

    How to do HTML/CSS form helpers/popover

    navigation drop-down menu in wrapper not showing second level

    How to add multiple css gradient as a multiple background?

    I have a white icon - how to make it black without replacing it with CANVAS? It is a .png icon

    How to print data from left to right in html using css

    How to get css or java class for specific part of code

    How to design a comment box similar to facebook using only CSS?

    How can I slide the sidebar out of view and make the content flexbox resize to fill the void?

    How to reduce css http requests?

    How do I make this background repeat horizontally the entire way across the screen?

    Background-Image does not show properly on IE8

    jQuery - How to show element when another has a value

    How to style Zend Checkboxes

    How to configure simple_form to show validation status

    How do I change the overflow of a single element, while having the overflow of the body hidden?

    How to get a white outline around an image in CSS

      list only showing contents of first
    • , ignoring second

    How do i style a list within a list?

    How to add JS and CSS file in web page based on parameter?

    how to style a symfony2 form button

    how to make dynamically loaded image with different width and height responsive in css