Position a floating information layer 2

[bdichiara]

I have a <div> that is floating on top of all other items, and it's position is relative to a search box on the page. the search box really only appears in 2 locations, once X pixels from the left side of the window, and secondly, X pixels from the right side of the window.

The problem is when the window is resized, if it's resized to where there are horizontal scroll bars, it causes my floating div move with the browser. How do i keep that from happening?

#search_popup {
	background-image:url(img/popup.gif);
	background-repeat:no-repeat;
	padding-top:15px;
	position:absolute;
	text-align:center;
	top:67px;
	left:410px;
	z-index:99;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
	color:#000000;
	width:100px;
	height:67px;
}

<div id="search_popup">
	Find anything!<br>
	Just type and go!
</div>

_______________
_brian.

 

[Vragabond]

If none of the elements are positioned, the element is position relative to the viewport -- the browser window. However, if any of the parents to this element are positioned, then your absolutely positioned element will be positioned according to that element. So, simply add positioning (relative or absolute) to the appropriate parent.

 

[cLFlaVA]

and it sounds like you need to add relative positioning to the search box's parent element. keep in mind that doing so will cause undesired results relating to the location of the search box. your left and top style attributes will likely need to be redefined.



*cLFlaVA
----------------------------
[tt]"quote goes here"[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[bdichiara]

ok, so if i want this div to pop up in relative to a form object (form > search_box | element > search), how would I go about doing that?

_______________
_brian.

 

[Vragabond]

You would add [tt]position: relative;[/tt] to the style of the form.

 

[bdichiara]

I don't think I'm quite sure how position: relative works. I've tried using it and usually messes up the layout of everything else. How do I make it float on top of everything, as well as be relative to an element in my form?

_______________
_brian.

 

[cLFlaVA]

you are asking questions, we are providing answers. you are then questioning the answers, clearly without trying them first.

How do I make it float on top of everything, as well as be relative to an element in my form?

You would add position: relative; to the style of the [[tt]parent element[/tt]].

*cLFlaVA
----------------------------
[tt]"quote goes here"[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[bdichiara]

ah, ok, i didn't quite understand that before. Now that I've done that, how do I make minor adjustments?

If i leave the style "as-is", it sits right on top of my form (as expected), however if i start trying to tweak it, by adding left: 10px; top:-10px; etc., it seems like it's still relative to the page.

_______________
_brian.

 

[Vragabond]

No no. You need to put left: 85px; and top: 22px;. How should we know where you want your box?

 

[bdichiara]

I know I'm the only one that can make the adjustments to suit my needs, however, what I'm asking is if I'm doing it right.

Let's say I use left:0px; top:0px;... That puts my div at the top left corner of the page, rather than the top left corner of my container. Really, I want it slightly up, and slightly to the left of it's default position.

_______________
_brian.

 

[bdichiara]

ok, i'm sorry to have been such a bother. I misspelled the id of my container div. that's why it wasn't working. thanks for all the help!

_______________
_brian.