How I can overlap a DIV on to other DIV?
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
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/
Try this, I like to use relative position for this kind of thing.
<html>
<head>
<style type="text/css">
body{
background-color: #000;
padding:0;
margin:0;
}
#bottom {
width: 200px;
height: 200px;
border: 5px #fff solid;
background-color:#f00;
margin: 0 auto;
}
.top {
width: 200px;
height:200px;
top: 10px;
left: -100px;
z-index: 10;
background-color: #00f;
color: #333;
border: 5px solid #fff;
position: relative;
}
</style>
</head>
<body>
<div id="bottom">
<div class="top"></div>
</div>
</body>
</head>
I would of course seperate the CSS into it's own file later.
Just use position: relative instead of absolute, or add a negative margin-top: -10px instead.
加载中,请稍侯......
精彩评论