Html 如何从子 Div 重叠父 Div

How to Overlap Parent Div From Child Div

提问by kamaci

I have some divs at my HTML and one of them is loading image div so I want it overlap its parent div. Here is my code:

我的 HTML 中有一些 div，其中一个正在加载图像 div，所以我希望它与父 div 重叠。这是我的代码：

<div id="something1">
    <div id="something2"></div>
    <div id="parent" style="border: 15px solid #c1c1c1;width:200px; height:250px;">
        <div id="child" style="position: absolute; border: 15px solid #a2f2e2"></div>
    </div>
</div>

When I use different positions (i.e. absolute, relative etc.) child div couldn't overlap its parent. Here is my fiddle link: http://jsfiddle.net/yNFxj/4/I don't want to see anything from parent div but I want to see that child div increased as parent's size and overlapped it.

当我使用不同的位置（即绝对、相对等）时，子 div 不能与其父级重叠。这是我的小提琴链接：http: //jsfiddle.net/yNFxj/4/我不想从父 div 看到任何东西，但我想看到子 div 随着父级的大小而增加并重叠。

Any ideas about how can I dot it just with pure html and css and with a generic way to implement it my any other pages?

关于如何仅使用纯 html 和 css 以及使用通用方法在我的任何其他页面上实现它的任何想法？

PS:Border, width, height etc. are just for example, it can be removed.

PS：边框、宽度、高度等只是举例，可以去掉。

回答by Shauna

Sajjan's the closest from what I can tell, but his has a few flaws:

据我所知，Sajjan 是最接近的，但他有一些缺陷：

1. Position: absoluterequires its parent to have a non-static position (this is often done with position: relative, which effectively works the same way as static).
2. You don't need to set the height and width of the child, just the parent.

1. Position: absolute要求其父级具有非静态位置（这通常用 完成position: relative，它的工作方式与静态相同）。
2. 您不需要设置孩子的高度和宽度，只需设置父母。

Here's my Fiddle for it to demonstrate.

这是我的小提琴来演示。

#parent {
    border: 5px solid gray;
    position: relative;
    height: 100px;
    width: 100px;
    margin-left: 50px;
}

#child {
    position: absolute;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
    background: red;
}

The key here is the position: relativeon the parent.

这里的关键是position: relative在父级上。

I am curious, though, what exactly you're trying to achieve with this. I have a feeling that whatever it is, there's a better way.

不过，我很好奇，你到底想通过这个实现什么。我有一种感觉，无论是什么，都有更好的方法。

回答by Sajjan Sarkar

Why doesnt this work for you? If i understand you right, you just want to mask the parent DIV with the child DIV?

为什么这对你不起作用？如果我理解你是对的，你只是想用子 DIV 掩盖父 DIV？

<div id="something1">
  <div id="something2"></div>
  <div id="parent" style="border: 15px solid #c1c1c1;width:200px; height:250px;">
    <div id="child" style="position: absolute; border: 15px solid #a2f2e2;top:0;left:0;width:200px; height:250px;"></div>
  </div>
</div>

Output on chrome:

铬输出：

To make it generic, get the parents position/dimension using offsetTop/Left/Height/Width methods and set the child's dimensions/position using these, im sure there are plenty of posts on SO that do this..

为了使其通用，使用 offsetTop/Left/Height/Width 方法获取父级位置/尺寸，并使用这些方法设置子级的尺寸/位置，我确定 SO 上有很多帖子可以这样做。

回答by Andrea Ligios

First problem is that absolutepositioned elements refers to the first parent element with a position different from static.

第一个问题是absolute定位元素是指位置不同于 的第一个父元素static。

This means that if no parents have fixed, relative, or absoluteposition, it will refer to the body, that is not what you want in this case.

这意味着如果没有父母有fixed,relative或absolute位置，它将引用身体，在这种情况下这不是你想要的。

Then put position: relative;to your parent div.

然后放到position: relative;你的父div。

Second problem: with absolute position, you can stop using widthand heightand start using top, left, bottomand rightproperties;

问题二：用绝对位置，你可以停止使用width和height并开始使用top，left，bottom和right性能;

Setting all them to 0means extends the object to the parent boundaries.

将它们全部设置为0意味着将对象扩展到父边界。

But here you want to overlap them, then... simply, use a negative value equals to the size of the parent borders: 15px;

但是这里你想重叠它们，那么……简单地说，使用一个等于父边框大小的负值：15px；

top:    -15px;
left:   -15px;    
bottom: -15px;    
right:  -15px;

Demo: http://jsfiddle.net/yNFxj/9/

演示：http: //jsfiddle.net/yNFxj/9/

I've used dashed borders so you can see the underneath parent's borders ;)

我使用了虚线边框，因此您可以看到下面的父边框；)

回答by Andy Holmes

HTML

HTML

<div id="something1">
<div id="something2"></div>
<div id="parent">
    <div id="child"></div>
</div>
</div>

CSS

CSS

#parent { 
  width: 100px;
  height: 300px;
  background-color: #a0a0a0;
  width:200px;
  height:250px;
  position: relative;
}

#child {
  width: inherit;
  height: inherit;
  position: absolute;
  background-color: #a2f2e2;
  top: 0px;
  left: 0px;
}

Works fine

工作正常

EDIT: added with and height inherit for you & positioned properly

编辑：为您添加和高度继承并正确定位

回答by kreative_ideas

Try this:

尝试这个：

<div id="something1">
<div id="something2"></div>
<div id="parent" style="border: 15px solid #c1c1c1;position:relative; width:200px; height:250px;">
    <div id="child" style="position: absolute; border: 15px solid #a2f2e2; width:200px; height:250px; left:-15px; top:-15px"></div>
</div>
</div>

update a fiddle for you http://jsfiddle.net/yNFxj/16/

为你更新一个小提琴http://jsfiddle.net/yNFxj/16/