Question

CSS定位网页中元素的题

在网页中有如下一段HTML代码，如果要使文本显示在图片上方下列语句正确的是（）。
（选择两项）
<div id="father">
<img src="image/photo.jpg" alt="日用品"/>
<div class="text">定位盒子......</div>
</div>
A img{position:absolute; z-index:1;} B img{position:absolute;}
c .text{positon:absolute;} D .text{position:absolute; top:0px;}

(我知道D是对的，C我在软件上打了以后发现是不对的 。 怎么说 是题出错了吗 )

Answer 1

要文字显示在图片上方（含文字在上层的情况，即不被图片遮挡），则文字需要脱离文档流，那么首先排除在图片上做文章的 A、B 两项。

再来看 C、D 两项，这两句都能使文字层脱离文档流，但 C 项的代码仅让文字层显示在了图片的“上层”，而 D 项不但让文字层显示在了“上层”，而且位于图片“上方”。

这道题其实不严谨，如果 #father 这层没有加相对或绝对定位的话，D 选项中的代码能让文字层跑出父容器，但不管跑哪里去，终归是显示在图片上方的，故 D 正确。

Answer 2

c和d 都是一个意思 。 只是d 定位top等于0 而c 定位默认top是img的高度。用了absolute 就会提升层级 ，只是c 你看起来 在img下面 所以看不出来 其实 层级也上去了