html - 如何控制内部

Question

请查看此处的网络链接->

JS小提琴

HTML

<div id="ma">
    <div id="mi">
        <div id="r">
            <span class="b"></span>
        </div>
    </div>
</div>

CSS

#ma{width:500px;height:500px;background:red;}
#mi{width:400px;height:350px;background:blue;margin:0 auto;position:relative;}
#r{width:200px;height:200px;background:green;float:right;margin:10px 10px 0 0;position:relative;}
#r .b{width:100px;height:100px;background:yellow;bottom:-100;position:absolute;}

假设黄色方块是一个图像，我希望它显示在绿色框的底部，部分图像在绿色框之外。

我已经在我的网站上测试了上面链接中的 css，黄色框显示在蓝色框下方。但是在 jsfiddle.net，它甚至忽略了底部属性。

Answer 1

您忘记了底部属性的“px”

目前 ：

bottom : 100;

一定有

bottom : 100 px;

Answer 2

你忘记了像素：

#r .b{width:100px;height:100px;background:yellow;bottom:-100px;position:absolute;}

Answer 3

您只需要在您的以下 css 中进行更改并更正 Fiddle 就在这里

#r .b{
width:100px;
height:100px;
background:yellow;
position:absolute; 
bottom:-20px; 
left:-20px;
}

Answer 4

你期待这样的事情 吗？

#ma{width:500px;height:500px;background:red;}
#mi{width:400px;height:350px;background:blue;margin:0 auto;position:relative;}
#r{width:200px;height:200px;background:green;float:right;margin:10px 10px 0      0;position:relative;}
#r .b{width:100px;height:100px;background:yellow;bottom:-50px;right:-10px;position:absolute;z-index:-1;}