How I can overlap a DIV on to other DIV?

后端未结

关注

 3  726

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

相关标签:

3条回答

甜味超标

2021-01-26 04:32

Just use position: relative instead of absolute, or add a negative margin-top: -10px instead.

0 讨论(0)
发布评论:

提交评论
- 加载中...
独厮守ぢ

2021-01-26 04:40
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/
0 讨论(0)
发布评论:

提交评论
- 加载中...

半阙折子戏

2021-01-26 04:45

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.

0 讨论(0)

How I can overlap a DIV on to other DIV?

CSS

HTML

Fiddle