Solved

Absolute Position inside a OverFlow

Posted on 2006-10-19
4
219 Views
Last Modified: 2012-05-05
suppose i have a html like this:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title>
      Untitled Page
</title></head>
<body>
    <form name="form1" method="post" action="testePosicionamento.aspx" id="form1">
<div>

</div>

    <div>
        <div style="overflow:scroll;width:600px;height:100px;">
      z
      <br />
      Z
      <br />
      z
      <br />
      Z
      <br />
      z
      <br />
       z
      <br />
      Z
      <br />
      z
      <br />
      Z
      <br />
      z
      <br />
      Z

 <script language="javascript" type="text/javascript">
   

    function lugarCerto(ref){
        var targ = document.getElementById('teste');
        targ.style.top = ref.offsetTop+10;
        targ.style.left = ref.offsetLeft;
       
       
       
    }
</script>

<input type="text"  onKeyDown="document.getElementById('teste').style.visibility = 'visible';lugarCerto(this);" onBlur="document.getElementById('teste').style.visibility = 'hidden';" />
<br />
<div id="teste" style="background-color:Blue;visibility:hidden;position:absolute;top:0px;left:0px;">
    <select size="4" >
</select>
</div>
Resultado
    </div>
        <br />

<div>
</div></form>
</body>
</html>

copy and paste and press a key at the input text..
see where the select appears ?.. if i remove the overflow it goes ok.. but i do need the overflow.. so how can i make the div with absolute position (the div of the select) be absolute positioned INSIDE the overflow ?
0
Comment
Question by:eguilherme
4 Comments
 
LVL 10

Author Comment

by:eguilherme
ID: 17768704
ps. the select must be absolute positioned since it will be dynamicly placed.. (thats why the js also)
0
 
LVL 2

Accepted Solution

by:
harshgrover earned 500 total points
ID: 17776470
modify the onKeyDown for the input type="Text" as below

onKeyDown="document.getElementById('teste').style.visibility = 'visible';document.getElementById('teste').style.position=absolute;lugarCerto(this);"

basically, when you say
document.getElementById('teste').style.visibility = 'visible';
 it overwrites the style parameter, so you need to set the style completely again.

a better way to do this could be using CSS, and modifying the className for the "teste" selectbox.

lemee know if you need help with CSS and i'll pass on the code for the same


0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
rearranging, beautifying pure CSS read more script 5 41
Error on link 14 40
Objects on Same Line 2 18
Put shading on half of picture 8 28
This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…

861 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

23 Experts available now in Live!

Get 1:1 Help Now