CSS 将一个 div 直接放在另一个 div 上
例如，我有一个 div，里面有一些东西，用户可以选择单击“x”来表示“这不适用于我”。
我不想删除 div，而是想在它上面播放一个半透明的 div。
我首先使用一些复杂的 javascript 来确定相关 div 的大小和位置，并在其上创建一个新的。脚本给出的尺寸和位置在我看来大致正确，但重叠 div 被放置在错误的位置。
然后我意识到（可能）有一种更简单的方法可以做到这一点。
我将一个带有“blackout”类的 div 放在我想要黑掉的 div 中。 blackout css 类的可见性设置为隐藏，因此 javascript 会在需要时将其设置为可见。
我遇到的问题是，即使使用这种方法，我似乎也无法让它精确填充父 div 的矩形。
我让
.blackout
{
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
background-color: black;
opacity: 0.5;
filter: alpha(opacity = 50);
}
This 填满了整个屏幕，而不仅仅是父 div。
我需要更改什么才能使其仅填充父 div？
I have a div which has some stuff in it, and the user has the option of clicking an 'x' to say "This is not applicable to me", for example.
Rather than delete the div, I want to play a translucent div on top of it.
I started off with some complicated javascript to determine the size and location of my div in question, and create a new one on top of it. The script was giving a size and location which looked approximately right to my eye, but the overlap div was being put in the wrong spot.
Then I realised that there is (probably) a much simpler way to do this.
I put a div with class "blackout" inside the div I want to black out. The blackout css class has a visibility set to hidden, so javascript will set that to visible when needed.
The issue I'm having is that even with this method, I can't seem to get it to precisely fill the rectangle the parent div has.
I had
.blackout
{
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
background-color: black;
opacity: 0.5;
filter: alpha(opacity = 50);
}
This filled up the whole screen rather than just the parent div.
What do I need to change to make it fill the parent div only?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（6）
您需要将
position:relative添加到父div中。这会将父
div设置为.blackout的“包含块”：在这里阅读更多内容：http://reference.sitepoint.com/css/containingblock
You need to add
position: relativeto the parentdiv.That will set the parent
divas the "containing block" for.blackout:Read more here: http://reference.sitepoint.com/css/containingblock
使用“position:absolute”将其相对于下一个“position:relative”div 定位。如果没有一套，那么它将使用身体。
您需要使父 div CSS 包含“position:relative”
Using "position:absolute" positions it in relation to the next "position:relative" div. If there isn't one set then it will use the body.
You need to make the parent div CSS contain "position:relative"
在父 div 的 CSS 上：
应该可以工作
On the parent div's CSS:
should work
将
position:relative添加到父级 div，overflow:hidden只会隐藏父级 div 的外部Add
position: relativeto the parent div,overflow: hiddenwill only hide the outside of your parent's div将
position:absolute;更改为position:relative;Change
position: absolute;toposition: relative;将子
width和height设置为 100% 并删除无用的标记。http://jsfiddle.net/MvPHj/
Set the child
<div>widthandheightto be 100% and remove useless markup.http://jsfiddle.net/MvPHj/