代码中的img
标签具有样式relative
,根据该样式,它应该放置在顶部的父div
relative
,但我不明白为什么它没有显示在提到的位置。这是小提琴。请帮忙。谢谢
<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>
position:relative
的意思。
position:relative
改变了所有孩子在 CSS 中有position:absolute
时定位自己的上下文。
例如:
<body>
<div id="a">
<div id="b">
Hello
</div>
</div>
</body>
如果div#b
的 css 为 position:absolute
则相对于body
设置位置。但是,如果div#a
的 css 也是 position:relative
,则div#b
的位置是相对于div#a
而不是body
设置的。
postion:relative
设置使用 positon:absolute
的子项的原点。
因此,在包装元素上设置position:relative
,在子元素上设置position:absolute
。
我不确定你在问什么,但是如果你想相对于它的div设置图像的样式,有一个技巧,你可以使父相对和内部元素绝对。这是编辑后的代码,以防您不明白我在说什么。
http://jsfiddle.net/ZByDf/9/