Html 如何在css中重叠两个div?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/16372000/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 08:07:42  来源:igfitidea点击:

how to overlap two div in css?

htmlcss

提问by zey

I have two divlikes ,

我有两个div喜欢

<div class="imageDiv"></div>
<div class="imageDiv"></div>

and cssclass ,

css班级,

 .imageDiv
    {
        margin-left: 100px;
        background: #fff;
        display: block;
        width: 345px;
        height: 220px;
        padding: 10px;
        border-radius: 2px 2px 2px 2px;
        -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
        -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    }

You can see the result Here:)

你可以在这里看到结果:)

I want to overlap this two divlikes ,

我想重叠这两个div喜欢,

enter image description here

在此处输入图片说明

回答by btevfik

add to second div bottomDiv

添加到第二个div bottomDiv

and add this to css.

并将其添加到 css 中。

 .bottomDiv{
       position:relative;
       bottom:150px;
       left:150px;
    }

http://jsfiddle.net/aw8RD/1/

http://jsfiddle.net/aw8RD/1/

回答by Raab

See demo hereyou need to introduce an additiona calss for second div

看这里的演示你需要为第二个div引入一个额外的类

.overlap{
    top: -30px;
position: relative;
left: 30px;
}

回答by dinodsaurus

I edited you fiddleyou just need to add z-indexto the front element and position it accordingly.

我编辑了你的小提琴,你只需要添加z-index到前面的元素并相应地定位它。

回答by Mi-Creativity

check this fiddle, and if you want to move the overlapped div you set its position to absolutethen change it's topand leftvalues

检查这个小提琴,如果你想移动重叠的div,你将它的位置设置为absolute然后改变它的topleft