I have an html page with a z indexed dropdown menu. I have this dropdown menu positioned absolutely.
with some given left and top values. The problem is the dropdown menu is at its place when the window is full screen but when the window is changed in size ( made lesser than the pc window the z indexed element shifts in position which makes it look awkward. I know it is due to absolute positioning.
can anybody please tell me how to fix this ? how to make the dropdown stay always in place. attached is the image.
Make sure that the containing element has 'position: relative;' set on it, the top / left values are based on the first containing element with a position set. If the containing element does not have a position set, it will try the next parent, and so on until it finally defaults to the body.
Here's an example:
http://jsfiddle.net/erinfreeman/AHWS2/
div with the id of 'one' has position relative, so the child div bases its bottom / right co-ordinates from that. the div with id of 'two' doesn't have position set so the child div goes to the next parent
Related
I do not mean an html <frame>. I mean something like the frame that goes around this text box that I am typing into on here, with a border and a button bar with some icons in it.
I'd like some editable content that can exist in 2 modes. The first is view mode, where you see the content. The second is editing mode, where a frame appears around it with any controls needed to assist with the editing.
I'd like the frame to not interrupt the normal page flow of the content. So if there was something very close above the content, then the tool bar would sit on top of it in the z-plane. The frame should appear to sit on top of the page, not within it.
I thought about getting the absolute screen coordinates of the thing being wrapped and using 'fixed' positioning to get the frame in the right place.
But I am wondering if 'absolute' positioning might work? Except in this case the absolutely positioned frame would be the parent of the thing it wraps, and 'absolute' positions a child relative to a parent, not a parent relative to a child. Or could a child that is positioned with absolute actually have a larger size than the child, and therefore wrap it like I describe?
You simply need a parent div that contains a div for the header bar and a second div for both input and output.
You would then hide the input and populate the output div with the contents of the input whenever your user was 'done' (simulated here by clicking 'Submit').
I've created a fiddle demonstrating this here.
Note that the input field would need a calc() applied to it in order to adjust for its width.
Hope this helps!
I'm using a javascript library to create modal windows in my application.
I'm having a problem where there are 2 divs, A and B (A is parent of B) both position:fixed. Div A has z-index:1 and the Div B z-index:3.
I want another div, C, also with fixed position but external to these two, be in between them (with z-index:2), but it ends up on top of all. Apparently the child div(B) z-index does not matter at all and always stays on bottom of div C..
I made a JSBIN with the sample here:
http://jsbin.com/koyasu/edit?html,css,output
This is just how z-index works. The parent div sets the layer for it and all of its children. Children who set a z-index will only be changing their layer inside that parent.
You'll have to restructure your DOM for this one, I'm afraid.
A fixed position always refers to the viewport, so you might as well take DIV "B" out of "A", getting three fixed elements on the same level. Then z-index can be applied more relieable.
I have a div which has like 200 lines of data (goes of the page). this div is positioned using css position:absolute.
After scrolling down, I would like to get the position of top of this div. currently it is giving me 0. which is wrong according to me as its outside the viewable screen area. it should be some negative numbers right?
No, the position is still 0, because that is where you positioned it. The top of the document is where 0 is, not the top of the current viewport. I think what you want is the window.scrollY, which will tell you how far down the page the user has scrolled from the top. The negative of this (-scrollY) will provide you the number you want.
If I have an item with float: right and for whatever reason the item has appeared on the next line for reasons such as too much content to the left of it, or the window is too small; how do I select items which match this case?
I wish to do this as the parent item uses a background image which looks fine, but it the floated item falls out it does not appear visible as the color and background-color are both the same.
is this at all possible?
The only way I see is to use javascript and detect relative position of the floated div. If this one has a y coordinate greater than 0, it has probably fall. Add a css class or whatever behavior you want in this case.
I have a CSS tooltip, with CSS3 fade in, with z-indexes set to 999. When I hover over the link, the tooltip itself pushes my other content down, it's meant to be above, not inline, although I've used a span and converted it to block..
Here is an example of what I'm going for, how can I stop it from pushing the content down?
Thanks.
Display:block doesn't take an element out of the page flow, it simply pushes it onto its own new line. Using position:absolute - as recommended by other posters - should work for you. Position:absolute will set a position (such as top:0px; left:20px;) to the browser window overall unless there is a parent with position:relative set (which would then become the point of reference). An example of this second type would be positioning a link exactly 30px from the right within a given content div - regardless of where that div is placed on the page.
Position:relative can be used to position an element relative to its original position in the natural page flow, and it leaves a space where the element would have been. Position:fixed can be used for elements that should not move when the page is scrolled (such as a fixed navigation bar, page branding, or footer). Position:static is the default position setting, and should be used when you need to override another position type.
If you're using a span for the tooltip text within another element - you'll likely want to set the parent element to position:relative, and set the inner span to position:absolute. You'll need to set a top and left value to adjust where exactly your tooltip text falls (ie. above or below the parent element, to the left or the right).
I hope this is helpful.
Absolute position the tooltip (set the container's position to relative and the absolute position will be relative to the container).
Did you make sure the tooltip css position value it absolute? (or at least not static).