Question

代码中的 img 标记有以下符号: relition ,根据这个标记,它应该被放置到父体 relition 上方的 > div 上方,但我不明白为什么它不能显示在所提到的 position 上方。这里是 "tidle 。请帮助解答。



<div>
    <iframe width="350" height="350" src="http://www.youtube.com/embed/P3weDRMemD8" frameborder="0" allowfullscreen></iframe>
    <form style="border:3px;text align.center;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit=                  "window.open( http://feedburner.google.com/fb/a/mailverify?uri=financeyoga/UPqT ,  popupwindow ,  scrollbars=yes,width=550,height=520 );return true">
        <input type="text" style="width:140px;padding:10px;" name="email"/>
        <input type="hidden" value="financeyoga/UPqT" name="uri"/>
        <input type="hidden" name="loc" value="en_US"/><br>
        <input style="padding:10px;" type="submit" value="Submit Email Address" />
    </form>
    <img style="position:relative;top:325px; left:10px;" src="http://financeyoga.com/wp-content/uploads/2012/05/follow.png" width="143" height="64" border="0" usemap="#Map">
    <map name="Map">
        <area shape="rect" coords="5,18,33,44" href="www.twitter.com" target="_blank" alt="twitter">
        <area shape="rect" coords="57,16,87,46" href="www.facebook.com" target="_blank" alt="facebook">
        <area shape="rect" coords="107,16,137,46" href="plus.google.com" target="_blank" alt="google plus">
    </map>        
</div>

Answer 1


s 与 position: relational  的意思不同。

position: relative 改变所有儿童如果在他们的 CSS 中有 < code> position: absolute 的上下文,如果他们有 < code> position: absolute 的上下文。

例如:

<body>
    <div id="a">
        <div id="b">
            Hello
        </div>
    </div>
</body>

如果 div#b 具有 position: absolute 的 css, 位置与 body 相对。但如果 div#a 有 position: relationive 的 css, 和 相对 div#a 的位置相对于 > div#a , 而不是 body 。

Answer 2


postion: relative  设定了使用 positon: absolute  的子项目的起始点。

在包装元素上设定 < code> position: relative ,在子元素上设定 < code> position: absolute 。

Answer 3

我不知道您在问什么, 但如果您想要将图像与图像相对的样式显示为 diiv, 就会有一个把戏, 使父系亲属和内元素具有绝对性。这是经过编辑的代码, 以防您听不懂我在说什么。

http://jsfiddle.net/ZByDf/9/" rel=“no follow'>http://jsfiddle.net/ZByDf/9/

友情链接