<meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><link rel=stylesheet href=../../css/main.css><link href="https://fonts.googleapis.com/css?family=Quicksand&display=swap" rel=stylesheet><script src=https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js></script><script>window.jQuery||document.write('<script src="../../js/vendors/jquery-3.3.1.min.js"><\/script>')</script><script>document.write('<script src="//pagea'+'d2.googles'+'yndication.com/pagea'+'d/js/a'+'dsby'+'google.js"><\/script>')</script><script>var superSpecialObject={};superSpecialObject['google_a'+'d_client']='ca-p'+'ub-4469282388984999';superSpecialObject['enable_page_level_a'+'ds']=true;(window['a'+'dsbygoogle']=window['a'+'dsbygoogle']||[]).push(superSpecialObject);</script><header class="page-header js-page-header"><a class=page-header-logo-container href=https://geek-answers.imtqy.com/index.html></a><div class=page-header-text>Geek Answers Handbook</div></header><section class="page js-page"><div itemscope itemtype=http://schema.org/QAPage class=page><div class=main-col itemprop=mainEntity itemscope itemtype=http://schema.org/Question><div class=question-header><h1 itemprop=name>Iframe positioning</h1></div><div class=question><div class=question-row><div class=question-text><div class=description itemprop=text><p>This is the iframe code for google translation.<pre class=prettyprint-override><code><div id="contentframe" style="top: 160px; left: 0px;"> <iframe src="/translate_p?hl=en&amp;ie=UTF8&amp;prev=_t&amp;sl=auto&amp;tl=en&amp;u=http://yahoo.co.jp/&amp;depth=1&amp;usg=ALkJrhjrVT6Mc1tnruB-zgrtu9cyQ1bSeA" name="c" frameborder="0" style="height:100%;width:100%;position:absolute;top:0px;bottom:0px;">&lt;/div&gt; </iframe></div></code> </pre><p>I tried to do something similar with div and iframe tags, but the html page does not end like google translation.<pre class=prettyprint-override> <code><div id="contentframe" style="top: 160px; left: 0px;"> <iframe src="http://stackoverflow.com" style="height:100%;width:100%;position:absolute;top:0px;bottom:0px;">&lt;/div&gt; </iframe></div></code> </pre><p>The IFrame appears right at the top of the page instead of appearing 160px later, as indicated by the div.<p>I am not sure what is wrong here with my code, which almost matches Google code.<p>Edit: Adding a position: relative to the label is not suitable as a solution. It compresses the div into a bar with a small height. It also means that the exact position of the page relative to the page cannot be indicated as a result.</div><div class="favorite hidden"><i class="far fa-star"></i></div><div class=votes-question><i class="glyphicon glyphicon-arrow-ups"></i><div class="vote-count greenc" itemprop=upvoteCount>+8</div><i class="glyphicon glyphicon-arrow-down"></i></div><div class=tags><span class=former-link>html</span> <span class=former-link>iframe</span> <span class=former-link>position</span> <span class=former-link>css-position</span></div><div class=clearfix></div><div class=action-time><span itemprop=author itemscope itemtype=http://schema.org/Person><span itemprop=name><span class=former-link>John tan</span></span></span> <time title="2013-03-23 14:22" itemprop=dateCreated datetime=2013-03-23T14:22:43+0000>Mar 23 '13 at 14:22</time></div><span class=former-link>source</span> <span class=former-link>share</span><div class=clearfix></div></div></div></div><div class=answers id=answers_hash><div class=answers-header><span class=pull-left><span itemprop=answerCount>4</span> answers</span><div class=clearfix></div></div><div class="answer-pager hidden"></div><div class=answer id=2650976_hash itemscope itemtype=http://schema.org/Answer itemprop=suggestedAnswer><div class=answer-row><div class=answer-text><div class=desc itemprop=text><p>This is because you lack <code>position:relative;</code> on <code>#contentframe</code><pre class=prettyprint-override> <code><div id="contentframe" style="position:relative; top: 160px; left: 0px;"></code> </pre><p><code>position:absolute;</code> positions itself against the closest ancestor that has <code>position</code> , which is not <code>static</code> . Since the default is <code>static</code> , this is what caused your problem.</div><div class=votes-answer><i class="glyphicon glyphicon-arrow-ups"></i><div class="vote-count greenc" itemprop=upvoteCount>+5</div><i class="glyphicon glyphicon-arrow-down"></i></div><div class=clearfix></div><div class=action-time><span itemprop=author itemscope itemtype=http://schema.org/Person><span itemprop=name><span class=former-link>Daniel Imms</span></span></span> <time title="2013-03-23 14:24" itemprop=dateCreated datetime=2013-03-23T14:24:15+0000>Mar 23 '13 at 14:24</time></div><span class=former-link>source</span> <span class=former-link>share</span><div class=clearfix></div></div></div></div><div class="answer rltd" id=2650978_hash itemscope itemtype=http://schema.org/Answer itemprop=suggestedAnswer><div class=answer-row><div class=answer-text><div class=desc itemprop=text><p>you should use this css property,<pre class=prettyprint-override> <code> position:relative;</code> </pre><p>use it for div tag #contentframe</div><div class=votes-answer><i class="glyphicon glyphicon-arrow-ups"></i><div class="vote-count greenc" itemprop=upvoteCount>+3</div><i class="glyphicon glyphicon-arrow-down"></i></div><div class=clearfix></div><div class=action-time><span itemprop=author itemscope itemtype=http://schema.org/Person><span itemprop=name><span class=former-link>user2536752</span></span></span> <time title="2013-06-30 15:52" itemprop=dateCreated datetime=2013-06-30T15:52:00+0000>Jun 30 '13 at 15:52</time></div><span class=former-link>source</span> <span class=former-link>share</span><div class=clearfix></div></div></div></div><div class="answer bt" id=2650977_hash itemscope itemtype=http://schema.org/Answer itemprop=suggestedAnswer><div class=answer-row><div class=answer-text><div class=desc itemprop=text><p>Try adding a CSS style property.<pre class=prettyprint-override> <code>position:relative;</code> </pre><p>into the div tag, it works,</div><div class=votes-answer><i class="glyphicon glyphicon-arrow-ups"></i><div class="vote-count greenc" itemprop=upvoteCount>+2</div><i class="glyphicon glyphicon-arrow-down"></i></div><div class=clearfix></div><div class=action-time><span itemprop=author itemscope itemtype=http://schema.org/Person><span itemprop=name><span class=former-link>Anurag-sharma</span></span></span> <time title="2013-03-23 14:57" itemprop=dateCreated datetime=2013-03-23T14:57:03+0000>Mar 23 '13 at 14:57</time></div><span class=former-link>source</span> <span class=former-link>share</span><div class=clearfix></div></div></div></div><div class="answer last" id=2650979_hash itemscope itemtype=http://schema.org/Answer itemprop=suggestedAnswer><div class=answer-row><div class=answer-text><div class=desc itemprop=text><p>you should use the position: relative; for one iframe and position: absolute; for the second;<p>Example: for the first use of iframe:<pre class=prettyprint-override> <code><div id="contentframe" style="position:relative; top: 100px; left: 50px;"></code> </pre><p>for second use iframe:<pre class=prettyprint-override> <code><div id="contentframe" style="position:absolute; top: 0px; left: 690px;"></code> </pre></div><div class=votes-answer><i class="glyphicon glyphicon-arrow-ups"></i><div class=vote-count itemprop=upvoteCount>0</div><i class="glyphicon glyphicon-arrow-down"></i></div><div class=clearfix></div><div class=action-time><span itemprop=author itemscope itemtype=http://schema.org/Person><span itemprop=name><span class=former-link>Subramonian inian</span></span></span> <time title="2016-08-08 15:59" itemprop=dateCreated datetime=2016-08-08T15:59:11+0000>Aug 08 '16 at 15:59</time></div><span class=former-link>source</span> <span class=former-link>share</span><div class=clearfix></div></div></div></div><div class="answer-pager hidden"></div></div></div></div><section class="more-articles-navigation-panel js-more-articles-navigation-panel"><h4>More articles:</h4><nav class="list-of-articles-container js-list-of-articles-container"><ul class="list-of-pages js-list-of-pages"><li><a href=../685255/index.html>What can I assume about optimizing the C / C ++ compiler? - c ++</a><li><a href=../685257/index.html>How to increase the size of the shortcut and cell when a button is clicked in TableViewCell. - ios</a><li><a href=../685260/index.html>skip an object and get properties - object</a><li><a href=../685261/index.html>Why does the overload resolution below call a function without a pattern? - c ++</a><li><a href=../685262/index.html>What is the difference between @Model and @ ViewData.Model? - asp.net-mvc</a><li><a href=../685268/index.html>How to change the sensitivity of touch and drag? - ios</a><li><a href=../685271/index.html>Difference between offer () and add () in priority queue in java? - java</a><li><a href=../685273/index.html>Annotations for Java enum singleton - java</a><li><a href=../685279/index.html>Rounded corners on a UIView - ios</a><li><a href=../685280/index.html>Refine JSON from curl in OSX - json</a></ul></nav></section><br><a href=../../allArticles.html><strong>All Articles</strong></a> <script src=../../js/main.js></script><script>(function(d,w,c){(w[c]=w[c]||[]).push(function(){try{w.yaCounter62683636=new Ya.Metrika({id:62683636,clickmap:true,trackLinks:true,accurateTrackBounce:true,webvisor:true});}catch(e){}});var n=d.getElementsByTagName("script")[0],s=d.createElement("script"),f=function(){n.parentNode.insertBefore(s,n);};s.type="text/javascript";s.async=true;s.src="https://mc.yandex.ru/metrika/watch.js";if(w.opera=="[object Opera]"){d.addEventListener("DOMContentLoaded",f,false);}else{f();}})(document,window,"yandex_metrika_callbacks");</script><noscript><div><img src=https://mc.yandex.ru/watch/62683636 style=position:absolute;left:-9999px alt></div></noscript><script>window.ga=function(){ga.q.push(arguments)};ga.q=[];ga.l=+new Date;ga('create','UA-166339405-1','auto');ga('send','pageview')</script><script src=https://www.google-analytics.com/analytics.js async defer></script></section><footer class=page-footer><div class="page-footer-legal-info-container page-footer-element"><p>Geek Answers | <span class="page-footer-legal-info-year js-page-footer-legal-info-year">2019</span></div><div class="page-footer-counters-container page-footer-element"><a class=page-footer-counter-clustrmap href=# title="Visit tracker"><img src="https://clustrmaps.com/map_v2.png?cl=698e5a&w=271&t=t&d=IDRwb302jFsed82JlnSkxjeQ3C5_AObCmGX74jggris&co=3a3a3a&ct=ffffff"></a></div></footer>