Question 45708 in CSS Question posted in
Some basic documentation can be found here.

How to fix position of an iframe such that it also changes its TOP level when scrolled? – CSS

I want to fix the position of an iframe element. The problem is, if I keep the position ‘STICKY’ it will cover the space as well and push the elements below. So, the best possible value is the ‘ABSOLUTE’ position.

But now if I keep the position absolute it doesn’t move along as I scroll. So neither sticky nor absolute work perfectly.

I want the Iframe to be on top of the texts below the input search, and it should scroll along with the screen. Just like the input element with position sticky does.

<h1><center>Heading</center></h1>

<input type="search" id="search" placeholder="Search...">
<iframe id="search-box" src="https://www.google.com/search?igu=1&ei=&q="></iframe>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

<style>
input#search {
 position: sticky;
 top: 43px;
 width: 100%;
 padding: 3px 5px;
 font-size: 20px;
 background: #f1f1f1;
}

iframe#search-box {
 position: absolute;
 left: 5%; top: 76px;
 width: 90%;
 height: 360px;
 border: 1px solid black;
}
</style>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Adding both to the input and iframe elements under a common div and then adding the sticky position value to it solved the problem!


  2. 0

    Its better to create .wrapper for STICKY block explicitly, it also can limit it`s contents (max-width/height) and lock positioning of STICKY element inside.

    If you hit "preview" button – paragraphs will be under STICKY because of limited height.

    If You want to avoid it – use FIXED positioning and additive rule margin-top:400px (height of STICKY block) for 1st paragraph.

    .wrapper{
 position:relativer;
}
.sticky{
 position:sticky;
 top: 43px;
}

input#search {
 width: 100%;
 padding: 3px 5px;
 font-size: 20px;
 background: #f1f1f1;
}

iframe#search-box {
 left: 5%; top: 76px;
 width: 90%;
 height: 360px;
 border: 1px solid black;
}

p{
outline:1px dashed #555; /* to track its "underflow" */
}

/* alternative with FIXED positioning*/
/*


.sticky{
 position:fixed;
 top: 60px; 
}

#first-p{
 margin-top:400px;
}
*/
    <div class="wrapper">
<h1><center>Heading</center></h1>
<div class="sticky">
  <input type="search" id="search" placeholder="Search...">
  <iframe id="search-box" src="https://www.google.com/search?igu=1&ei=&q="></iframe>
</div>

<p id="first-p">This is a paragraph.</p>
<p>This is another paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>


</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search