jquery css 将 div 覆盖在另一个 div 上?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/7016410/
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-26 21:41:44  来源:igfitidea点击:

jquery css overlay div over another div?

jquerycss

提问by kritya

I tried to find to overlay a div over another then i found out this

我试图找到将一个 div 覆盖在另一个上,然后我发现了这个

But this doesnt seems to works for me ?

但这似乎对我不起作用?

I just want it something like :

我只想要这样的东西:

<div>The div below</div>
<div>OverLay div</div>

Can u please give me a working demo ?

你能给我一个工作演示吗?

回答by Naftali aka Neal

Here is a fiddle for you: http://jsfiddle.net/maniator/J9bjm/

这是给你的小提琴:http: //jsfiddle.net/maniator/J9bjm/

The only thing you need to grasp from it is the position: absolute;and the top: 0;(or however far away from the top of the page that you want it)

您唯一需要从中掌握的是position: absolute;top: 0;(或离您想要的页面顶部有多远)

回答by DwB

The first answer seems good to me, but here is a link to the w3schools css positionpage. The "try it yourself" is a convenient sandbox.

第一个答案对我来说似乎不错,但这里有一个指向w3schools css 位置页面的链接。“自己尝试”是一个方便的沙箱。

Edit: as noted in the comment, w3schools is not a good reference. I marked the link with strikethrough, but left it live.

编辑:如评论中所述,w3schools 不是一个好的参考。我用删除线标记了链接,但让它保持活动状态。

回答by Simeon

Here's another solution that might work in your particular case, using negative margin instad of position:

这是另一种可能适用于您的特定情况的解决方案,使用负保证金 instad 位置:

<div id="one">One</div>
<div id="two">Two</div>

#one, #two, #three, #four {
    background: #ddd;
    height: 100px;
    width: 100px;
}
#two {
    background: #aaa;
    margin-left: 10px; /* Set to 0 for complete overlap */
    margin-top: -80px; /* Set to -100 for complete overlap */
}

http://jsfiddle.net/xatpf/

http://jsfiddle.net/xatpf/

回答by Artur Sapek

Depending on the structure of your HTML, you probably don't even need jquery to do this. If you know exactly where you want them to be in the window you can use the position: absolute;CSS on them both. This pageexplains pretty well how to use the positionCSS attribute in different ways to position divs pretty much however you may like.

根据 HTML 的结构,您可能甚至不需要 jquery 来执行此操作。如果您确切地知道希望它们在窗口中的哪个位置,则可以position: absolute;对它们都使用CSS。这个页面很好地解释了如何以position不同的方式使用CSS 属性来定位 div,但是你可能喜欢。

EDIT: I edited the fiddle with

编辑:我编辑了小提琴

body{
padding:0px;
}

To make them line up at the top, the window by default has some padding which affects anything that's not on position: absolute;

为了使它们在顶部排列,默认情况下窗口有一些填充,它会影响任何未打开的内容 position: absolute;