Adding z-index applies it to the whole page. Is it possible to create a z-index hierarchy only in a specific div to it's childeren and reset the whole hierarchy outside of this div so you start applying from 1 again.
I want to create a button with :before and :after elements that are behind the button Creating only top left and bottom right corner borders that are not width: 100%; but 40.
Related
does anybody know a way of positioning an element to be always in the same position, but having different parents that are in another.
Ok to make is clearer here is an example. You have horizontal dropdown navigation, when u hover over one navi element, u see subnavi just under the element you hover over, how can I make it to appear on, for instance, top left corner of the screen, always. Next button will be next to the first one, for about 100px right, and now when u set pos absolute or relative, the subnavi wont be exacty in the same position as the first one, but 100px to the right. And also, I can't use special class or ids, only global classes.
Without your code its hard to answer your question, I however give it a try:
You can make it by applying position: absolute; left: 0px (change left to your wishes, and add a top: 0px if you want to adjust the stating height), to your submenu, check this demo.
Note that the submenu only appears when you hover the parent. On blur, it disappears. When you want it to stay, you'll need some javascript (or jQuery).
position the parent DIV "relative" than you position the child div "absolute".
http://css-tricks.com/absolute-positioning-inside-relative-positioning/
I'm working on an interface that utilizes a list of items within a scrollable div, some of which utilize a rollover menu on hover that extends outside of the div. Disabled scripting compatibility is a priority for the site, so I'm trying to see if the interface can be done with only CSS before I start getting into other compromises.
I've got some examples below. The menu in question is on the right side with heading 'select projects'. The third list item from the top in each page contains a rollover menu.
In order to keep the rollovers positioned relative to the their parent when scroll position changes, I positioned the parent li's relative and the child ul's positioned absolute.
EXAMPLE 1
Of course, once overflow:auto is on and the scroll in place, the rollovers are cut off from displaying.
EXAMPLE 2
I tried removing the relative positioning of the parent li's, and retaining the absolute positioning of the rollovers to free them from the div, but then they do not position properly when scroll position is changed.
I can only post two links but if you want an illustration, it's here: eypaedesign.com/markets-rollover-issue-no-relative.htm
With the exception of changing the UI, is there a combination of properties I'm not seeing here that can be used to make this interface work on CSS? I could position the entire div as absolute, and add a large amount of left padding for the rollovers to appear in, but that seems pretty inelegant.
Thanks folks -
With only CSS, you are limited to only one or the other: overflow: auto or overflowing hover-menus. Using separate visible and auto properties for overflow-x and overflow-y doesn't work, so I think your best bet is to go with the padding solution you were considering.
With proper use of absolute positioning and z-index (in case you are concerned about padded menu container hit-blocking any elements under the padding), you should be able to do it without destroying the rest of your layout. You'll have to control the size of all child elements inside the scrollable container of course, so that they don't extend to the full width of their padded parent.
Adding these properties - with no other changes - seems to work on your site, so perhaps you can get away with it easily:
#project_menu {
padding-left: 300px;
margin-left: -300px;
}
.center {
position: relative;
z-index; 10;
}
if you put a height of 293px in your class nav it should be ok.
Or in you project_menu ID, As I can see that ID has a height of 218px and your UL is 293px.
By changing one of those 2 you should be ok. It depends on how you set it affect other element.
But using project_menu ID should be just good.
I know that I can hide an element without removing the space it would occupy by using visibility: hidden. What I want to do is the exact opposite: I want to render the rest of the page as if the element wasn't on the page, but keep the element visible.
The reason I'm asking is because I have a centered 950px-wide layout to which I want to add a little box on the left side of the screen. It would look kinda like this:
Right now I have a <div> that holds the side box as the top element in my 950px page wrapper, which is also a <div>. To the side box I've applied position: relative and left: -200px (box width) to move it to the side, but that still leaves me with the main content being pushed down. Am I approaching the problem correctly? Is there a logical way to remove the vertical space that was left behind by the side box?
Just use position: absolute;. The element will no longer be part of the document flow, and you can position it relative to its closest non-statically positioned ancestor.
Position relative will still occupy the space. Try position:absolute; It will place the element absolutely inside its parent but above all of its siblings.
I have a div which I have set to absolute position and z-index above all the other divs on the page. The issue I'm having is where the absolute position div sits is above some divs that are interactive with the users mouse. Is there a way to turn off the interactive state of the absolute positioned div so the divs below are active.
Absolutely positioned elements use the z-index for stacking - which explains why content below is inaccessible. It is, unfortunately, not a case of interactive states, but simply of obstruction.
Any absolutely positioned block elements will obscure elements set below them as far as the dimensions of the uppermost element stretch (set a border on the div to see exactly how far the obstruction is occurring).
Your best bet (within the bounds of css) is to either position the obscuring div below where you need interactivity, or to add the properties of the obscuring div directly to the div being
obscured.
EDIT: i.e. there is no property in CSS to turn an interactive state on or off.
UPDATE 2011/11/11: see https://developer.mozilla.org/en/CSS/pointer-events for a solution to the question. pointer-events: none; is a valid solution to the question.
I have my menu working the way I want with the exception that menu elements are displayed from the top down as supposed to bottom up. I tried changing the CSS properties, but still can't get it working. I need my DIV container to be align on the bottom of the parent container. I used 'bottom: 0' CSS property but that doesn't have any affect using both 'position: absolute' and 'position: relative'.
How can I align all the elements within the parent DIV be displayed at bottom: 0 (bottom up)?
Then click on the Projects bottom link (refresh if you need to reset the menu items). I need that same behaviour I already have, just the menu items should start from the bottom up and be aligned all the way to the bottom.
Any suggestions?
Thanks,
Partizan
The best way to accomplish this is to either put the divs inside the sought after parent element. Ergo the <li> you want to associate these links with. Give the parent <li> a style of position:relative. The on hover set the position of the child div or li to abosulte and left:0;top:0;. Then from there you can style it closer or farther with margin.
Try using padding-top to push them down with an id or class on each sub menu.
Then if that fails, try using min-height: auto; on each parent.