Question

请在此处查看网络链接 - ＆gt;

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：

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

Answer 2

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

目前：

bottom : 100;

必须

bottom : 100 px;

Answer 3

您只需要对以下css进行更改并更正小提琴 here

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

Answer 4

你期待类似的东西吗？ this?

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

如何控制<div> <div> </div> </span>内的<span>

4 个答案: