What I have is a bunch of markers displaying on the map, these are loaded from an array and displayed with a function. Layer1 and Layer3 have position absolute, so if you add a position style (absolute or relative) to Layer2, you will be able to pull that div to the front, also pulling the rightlayer div to be in a higher layer than Layer3.I'm pretty new to javascript and I'm learning as I go along, so sorry if this is simple. If so, you could solve the problem by changing the z-index order of the divs. I'm assuming from the example that the links in the rightlayer are the only links that need to be clicked, and that you don't have links in the other layers. You may want to refactor your code and go with a two column layout for #rightLayer and. You could try setting z-index on the bottom layer but that works on elements that have been positioned with absolute, relative or fixed (position:absolute).Īdd position:relative z-index:100 to #rightLayer. It is hard to tell without seeing some code. CSS is hard if you haven't built up the experience, so leverage the experience of others. Standard techniques exist which solve your problems. Every CSS layout which can be done has been done a million times already. Google "CSS column layout" and find a pattern that reflects what you need and adapt that. The cost of this is that your Layer3 is no longer 100% widthģ). 80%, or more likely given your use of pos:abs set left:0px and right:199px (I'm guessing that padding-left on Layer2 is an intended column width?). This just moves the entirety of Layer3 below the rest of the page so what was hidden becomes exposed, but also vice versa depending on content.Ģ). Set a z-index of -1 on Layer3 - z-index is how you can change the layering order from the default (as encountered). Looking at your CSS and markup (which honestly could be cleaned up, but I'll assume there's other mark-up you're not showing us which justifies it) there's a couple of easy win ways:ġ). Just because it's transparent doesn't mean it's not taking up space. Wouldn't work with paper, won't work with HTML. And now you expect to be able to "see" the covered content. Now you've told the rendering engine to put your 3rd div in a position where it overlaps the 2nd. It does this in the order it encounters them putting each bit of paper on the page as it goes - the last item is going to be on top. The rendering engine cuts out a bit of paper in the dimensions you give it (or it works out) for each element it finds. ![]() Think of CSS layout as if you were physically working with bits of paper (this is much easier to visualise if you give all your "layer" divs a different background colour). It is not possible if you want the divs to stay in their current x,y, (and most importantly) z - only the "top" layer is clickable. TEST>TEST>TEST>TEST>TEST>TEST>TEST>TEST>TEST>TEST>TEST>TEST>TEST>TEST>TEST>TEST>TEST>TEST>TEST>TEST>TEST>TEST>TEST>TEST>TEST>TEST>įont-family:"Trebuchet MS",arial,sans-serif The test links become unclickable when inline with the header in Layer3, but below that they are fine. Here is an example, with html and a stylesheet. Is there a way to make the layer display, but be click through, while still having it's own links clickable? I have links in the first layer, which the second layer overlaps, which stops the links from being clickable. If I have two layers on a page, split horrizontally, with the second layer overlapping part of the first layer, is it possible to make it "click through"?
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |