How I can overlap a DIV on to other DIV?_问答_开发者

How I can overlap a DIV on to other DIV?

开发者 https://www.devze.com 2023-01-18 16:14 出处：网络

I am trying to make an overlapping a DIV onto other visually . I am trying 开发者_运维问答{ position:absolute;

相关专题：css

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.