Imgs不会进入div(Imgs don't get inside div)

Imgs不会进入div(Imgs don't get inside div)

我有一个div容器，我想放置两个图像，一个在另一个上面，其中唯一可见的图像将是检查的图像。 我给我的容器position:relative和我的imgs position:absolute; ，因此它与容器有关。 但相反，数字标签的所有内容都远离容器，我不知道为什么。

这就是我所拥有的： https ： //jsfiddle.net/rckecf2b/1/

I have a div container where i want to put two images, one above the other, where the only visible image will be the one checked. I give my container position:relative and my imgs position:absolute;, so it will be absolute in relation to the container. But instead, all the content of the figure tag are going away from the container, and i don't know why.

Here's what i have: https://jsfiddle.net/rckecf2b/1/

最满意答案

如果我理解正确，你需要让div具有绝对位置和相对于父亲的图像，就像这样

当某物具有绝对位置时，它会忽略其他设定位置。 如果你想让这些位置在div中看起来是绝对的，你需要它们是相对的

#container-fim-ap{ border:solid 5px #ABB7B7; width:50%; word-wrap:break-word; border-radius:2%; /*visibility: hidden;*/ position:absolute; height:auto; } #container-fim-ap figure{ position: relative; left:0; }

https://jsfiddle.net/rckecf2b/3/

玩一下吧

Well it turns out that givin' height:200px to #container-fim-ap solved the problem.

#container-fim-ap{ border:solid 5px #ABB7B7; width:80%; word-wrap:break-word; border-radius:2%; /*visibility: hidden;*/ position:relative; height: 200px;

http://jsfiddle.net/rckecf2b/2/ Thanks for the help everybody.