Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to position 2 relative divs over each other/top css property differs across browsers, with css so they appear the same in all browsers?

I have the following div elements:

<div id="banner1">   
    <div id="whiteout"></div>
    <div id="banner2"></div>    
</div>

I need either: the 'whiteout' element to appear directly on top of 'banner1' and 'banner2'and having it display the same in all browsers (currently Firefox and IE seem to have a hard time displaying it properly even though the 'top' css property is in pixels) - alternatively, could someone please tell me how to display 2 relative divs over each other?

Currently, my css is as follows:

div#banner1 {    
    width: 100%;
    height: 140px;
    background-image: url( "images/banner/1.png" );
    background-position: center center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    border-collapse: collapse;    
}

div#banner2 {   
    width: 100%;
    height: 140px;
    background-position: center center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    border-collapse: collapse;    
}

div#whiteout {    
    border: 1px solid black;
    width: 500px;
    height: 140px;
    background-image: url( "images/whiteout.png" );
    background-position: left center;
    background-repeat: no-repeat;
    border-collapse: collapse;
    position: absolute;
    z-index: 1;
    display: block;
    top: 50px;   
}

Thanks sincerely for any help or suggestion! :)

Piotr.

like image 787
Piotr Avatar asked Apr 07 '11 12:04

Piotr


People also ask

How do I put two divs on top of each other in CSS?

You can use the CSS position property in combination with the z-index property to overlay an individual div over another div element. The z-index property determines the stacking order for positioned elements (i.e. elements whose position value is one of absolute , fixed , or relative ).

How do you align items on top of each other in CSS?

Using CSS position property: The position: absolute; property is used to position any element at the absolute position and this property can be used to stack elements on top of each other. Using this, any element can be positioned anywhere regardless of the position of other elements.

How do I position a div relative to another?

First set position of the parent DIV to relative (specifying the offset, i.e. left , top etc. is not necessary) and then apply position: absolute to the child DIV with the offset you want. It's simple and should do the trick well.

Which CSS property is used to control positioning of divs one on top of another?

The position property specifies the type of positioning method used for an element.


1 Answers

<div id="banner1" style='position: relative'>   
    <div id="whiteout" style='position: absolute; top:0;left:0'></div>
    <div id="banner2" style='position: absolute; top:0;left:0'></div>    
</div>

OR assumiong the height of 140px

<div id="banner1" style='position: relative'>   
    <div id="whiteout"></div>
    <div id="banner2" style='margin-top: -140px'></div>    
</div>

Tweak it to get exact results

like image 56
Itay Moav -Malimovka Avatar answered Sep 28 '22 09:09

Itay Moav -Malimovka