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 では、bottom プロパティも無視されます。

Answer 1

あなたはpxを忘れました：

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

Answer 2

このようなことを期待しています か？

#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;}

Answer 3

次のcssを変更するだけで、修正されたFiddleがここにあります

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