FAQ Database Discussion Community


Placing anchor's text above its absolutely positioned pseudo element

css,z-index,pseudo-element
Is it possible to turn this: into this? Ie. placing the anchor's text above its absolutely positioned arrow pseudo element. The only solution I can think of is wrapping the anchor text in a span and then absolutely positioning that again over everything. But is there a way to do...

Stacking order (z-index) when using transform

jquery,css3,z-index,transformation,transitions
At the the fiddle below I have a right nav which has a submenu, the submenu should appear as the user enters text in the search field. ATM. I had to place the search box outside of the navbar (.link-list) since the element containing the submenu appears over it thus...

z-index:20 appears under the z-index:10 even if its z index bigger

jquery,css,z-index
i am trying to make a lightbulb. here is codes JSfiddle HTML <input class="button" type="button"> <div id="black" style="display: none; position: fixed; width: 100%; height: 100%; left: 0; top: 0; background: rgba(51,51,51,0.7); z-index: 10;"></div> <div id="add" style="z-index: 20; display:none; border: 2px solid;"> <input type="text" > </div> Jquery $('.button').click(function() { $('#add').show(); $('#black').show();...

Change Z-Index of a label control in code [duplicate]

c#,controls,z-index,styling
This question already has an answer here: Bring Winforms control to front 4 answers So I'm trying to create a label with the following code : Label letter = new Label(); String key = Convert.ToString(e.KeyChar); letter.Text = key; letter.ForeColor = textColor; letter.Size = new Size(10, 20); letterSpacing = letterSpacing...

CSS Column Overlap/Overflow

css,overflow,z-index,column-count
I have a question about using absolutely positioned divs in CSS columns. Basically, I have a menu system that uses an unorganised list with count-count 2 applied. On hover of one of the li elements, I want an absolutely positioned div to appear - which it does. But it seems...

z-index for button over jquery slider

jquery,css,button,slider,z-index
I have a full screen jquery slider and I need to put two buttons on it (to increase and decrease the speed of the slider). I tried with z-index in the css file but it's not working. div#lyr1 { position:relative; z-index:1; } .ui.button { ... position:relative; z-index:2;} And here's the...

Overlaying a Image with CSS

html,css,background,overlay,z-index
I have a store with a gallery. I was looking to overlay the Thumbnail if a Sold stamp that I made. If i disable the image the overlay is showing bellow, so I know it is inserting the image, it isn't on top though. What I see: How I know...

Z-index value ignored when using perspective

jquery,css,z-index
I'm trying to zoom on a div once it's clicked. The problem I'm facing is that even though I update the z-index with jquery and it gets updated, it takes no effect on the div and other divs still stay on top, here's an example: http://coldtask.com/ If you click on...

How to add 'if' to jQuery chain code

jquery,z-index
I need to replace the 4th line in - this.menu = $("<ul>") .addClass("ui-autocomplete") .appendTo(this.document.find(this.options.appendTo || "body")[0]) .zIndex(this.element.zIndex() + 1) // !! <- here // !! .hide() .data("menu"); with the following code - if (XXX.style.setProperty) { // IE 9- does not support... XXX.style.setProperty ("z-index", (this???.element.zIndex() + 1), "important"); } How do...

Seams in shadows between adjacent divs

html,css,css3,z-index,box-shadow
Adjacent elements typically appear as if they were fused, with no lines or seams between them). Example: http://jsfiddle.net/4m3L79w4/1/ However, this does no longer appear to be the case if shadows are in use. Html: <div class="top"></div> <div class="bottom"></div> Css: DIV { background-color: #7faf7f; width: 400px; height: 50px; position: relative; box-shadow:...

Google maps dragging doesn't work in lightbox

jquery,google-maps,z-index
I'm trying to show google maps inside lightbox but dragging and scrollwheel options doesn't work. Maybe you have idea what to do. I don't know if the problem is related with z-indexes. I tried everything. So the lightbox what I am using is this: Lightcase . Its usless to put...

Z-index Find the stacking context of an element

javascript,html,css,z-index
How do I find the stacking context of an element? Or, how do I find that element's ancestor element which is controlling the z-index of the descendant? I have a very complex page with nested tables, divs. And an absolutely positioned box with a high z-index is hidden. I have...

AS3 Drag and Drop

actionscript-3,flash,drag-and-drop,z-index
I want to make a pairing-ups by drag and drop. There are three items are supposed to move on corresponding other three items on the stage. However I can predict that adding children dynamically change the all indexes (z/depth/whatever). So when 'accidentally' someone hovers over a matched pair, mouse will...

Z-index not working on pseudo elements

css,z-index
I have looked at other answers but was not able to specifically find an example. If i am using a :before or :after pseudo element as an overlay with an absolute position, is it possible to change the z-index of elements inside the parent container to bring them above the...

z-index woes: Can't get navgational drop down to appear above slider

css,z-index
Got a weird one because in some cases, it works and in others, it doesn't. I'm currently wrapping up a site and on this page (http://panchosrestaurant.com/drinks/beer/) there's an issue when you rollover the 'Drinks' button. A drop down appears, as it should, but the graphic frame which is the last...

Issue with z-indexes within an iframe

jquery,css,iframe,internet-explorer-8,z-index
I am developing an asp.net web application that will be used within an iFrame in an existing application. The application needs to support IE8 and above. The application looks fine alone in IE8, but once you render it within the iFrame it seems to disregard z-indexing. This is essentially the...

div above other divs

css,z-index
I'm trying to order my divs in such a way, but I cannot find a solution (mainly there is a problem with the yellow box): HTML: <div class="container"> <header> <div id="header-top"></div> <div id="header-bottom" class="clearfix"> </header> <div style="clear:both"></div> <div id="content"> </div> CSS: header {padding: 0;margin:0; position: relative; z-index: 1;} #header-top {...

Sub-menu items showing in Firefox and IE but NOT in Chrome

html,css,drop-down-menu,z-index,submenu
I'm facing a weird problem with displaying the sub menu-items for a wordpress site. The sub-menu items work fine in Firefox and IE but not in Chrome. I'm using the latest version of Chrome. The problem is when I visit the home page, the drop-down works for Chrome as well,...

CSS: Preventing a property to affect on element until the end of transition

css,css3,css-transitions,z-index
We've some boxes to show some data on hover. So, when we move mouse over one element, it should expand, get in front of other elements, and show the hidden data. I did something like this: box:hover { z-index: 50; } But there's one problem; When we move mouse on...

The right way to set z-index

css,z-index,shadow
I have that html <div id="menu"> <a class="active"></a> </div> <div id="content"></div> And that css #menu { position:absolute; z-index:1; } #content { position:absolute; z-index:2; text-shadow: -10px 3px 10px rgba(0,0,0,.23),0 3px 10px rgba(0,0,0,.16); } #menu a.active:after { position:absolute; z-index:3; text-shadow: -10px 3px 10px rgba(0,0,0,.23),0 3px 10px rgba(0,0,0,.16); } I want a.active:after was...

Can't get the footer on top of background image

css,z-index,footer
I just want the footer to appear on top of the background image. There is a background image which is the color and a logo of the company full screen except of the bottom 2 cm. There I want simple text with a link. Will do that myself, but cant...

Menu interfering with my gridview control

c#,css,asp.net,gridview,z-index
I implemented gridviewscroll from http://gridviewscroll.aspcity.idv.tw/Demo.aspx#Freeze on my web application but the menu seems to hide behind the gridview like in the below picture: the actual menu looks like this on other webforms: My question is how do I send the gridview behind or how else can i work around this...

How do I change the z index or stack order of UIView?

swift,uiview,ios8,z-index
I've stacked a UIView on top of an existing controller in an effort to create a gradient layer. However, when I load the view the new UIView (naturally) is on top of everything. Relevant Code: class ViewController: UIViewController { @IBOutlet weak var myGradientView: GradientView! override func viewDidLoad() { super.viewDidLoad() }...

Why is my z-index not working in this code?

html,css,z-index,styling
I have a website here with a sidebar, but I want the sidebar to be hidden until the user clicks on a menu button. Anyways, my .sidebar is on z-index: 0; while my .page-content is on z-index: 1;. Why is the sidebar not hidden when I load the webpage? I...

Jquery UI trouble with z-Index in both draggable and resizeable divs inside parent container

jquery,css,jquery-ui,z-index,jquery-ui-draggable
I am working on developing a dashboard which will contain data in tiles. Right now I have implemented the Jquery-UI for draggable and resizeable divs. I have also limit the min max height and width but now I am having a problem with dragging and resizing. How I can control...

how to display div in front of
element

css,z-index,drupal-themes
How can I display a div that is outside the <header> element in front of the header i.e. with a higher z-index. I've tried to use the z-index property but it doesn't seem to work. My particular example can be seen here: http://www.spabc.com/drupal/ I want to display the logo on...

Canvas with negative z-index issue on scroll in Chrome

html,css,google-chrome,canvas,z-index
Description There is an issue with canvas negative z-index. Basically, when there is 2 elements in fixed position, one being a block element and the other being the canvas, and the z-index of the canvas is negative, it will scroll over the second one no matter what's its z-index. This...

How can I give a child element of one parent a higher z-index than another parent?

html,css,z-index
I have a sidebar split into two divs with an equal z-index. The first div, top, has a link that shows another div, hover when you hover over it. hover extends down into the bottom div, bottom, but since top and bottom have the same z-index, hover is covered by...

Link with negative z-index not clickable in IE

html,css,internet-explorer,z-index
Can anyone give me a hint why the link in the gray box is not clickable in Internet Explorer (I'm using version 11). http://jsfiddle.net/rk7n7xjj/1/ I tested it in any other browsers and it works fine. HTML <div class="gray"><a href="#bla">This link is not clickable in IE</a></div> <div class="yellow">Some placeholder text</div> CSS...

Images in front of a border

html,css,border,z-index
this is what I'm trying to achieve: http://imgur.com/2OqnSIu Three hours passed and I still can't figure it out how to do this. I've tried everything with positions and z-index but nothing works. I really don't want to use everything in a single image(border + pictures) and using it as a...

Bring an overlapping css3 transition to the front with z-index

html,css3,css-transitions,z-index
I am creating a portfolio page to display some images. I used the CSS3 transition to expand out the thumbnail to a full size image when you hover over it but the other thumbs stay in front of the expanded element. I tried using a z-index to force them to...

HTML + CSS: z-index positioning

html,css,z-index
My webdesign is consisted of three parts. The red part is <ul>and <li>, classic list (menu). Yellow part is another list in previous red list (submenu) and blue part is normaly <div>. I need the yellow list on top, blue in middle and red at the end only in HTML...

Display CSS content above everything else

html,css,z-index
I found a very simple CSS example for creating custom tooltips with the content setting and the demo of it looked great. I took the styling and implemented it into my own page, however I quickly noticed that the tooltip seems to be using the min-width as the width and...

Relative positioning without z-index causes overlapping

css,z-index
I created two sibling divs and applied negative margin on the last one, but when I added position: relative to the first one, it overlapped its next sibling: .box { width: 100px; height: 100px; } .box-1 { position: relative; background: orange; } .box-2 { margin-top: -50px; background: yellowgreen; } <div...

Z-Index With Position: Relative

html,css,position,z-index
I am trying to transfer a mobile app design into a website. I need to keep some elements in the same place over different resolution screens and window sizes. I am using relative positioning for all my positioning but I can't seem to get the elements to overlap using Z-Index....

Logo link not clickable on Wordpress Site

html,css,wordpress,z-index
I have a small issue, I have a wordpress site and the logo has a link with the homepage URL (should be standard across all websites). However, the logo is not clickable until some other links has been clicked on. When you first go into the site without clicking on...

Twitter Bootstrap Button dropdown z-index layering issue

html,css,twitter-bootstrap,z-index,layer
I've been pounding and pounding on this. I have a comment section on my site with an option to edit with a Twitter Bootstrap dropdown button, but I as you can see below, it's hidden by the following comments. I know it's not an overflow issue, as you can see...

z-index isn't working on tumblr? Images keep on overlapping.

html,css,image,z-index
So, I have this thing where this image sits on top of anything, regardless of how much I alter the z-index. I want to make it so that the bluff tag sits on top of the .quoteicon, but no matter what I do it just doesn't work. The little quotation...

Getting Elements positioned correctly

html,css,position,css-position,z-index
I have beat my head on this for over an hour and I need your help, I am creating a web form and I am having the most difficult time getting these shadow elements pushed behind the form and not the container. I have tried giving the .form class div...

z-index not working with my animation

html,css,svg,z-index
The following code (html & css) drives me crazy... jsfiddle link How can I use z-index (or anything else) to have the 3 circles always visibles. With the blue one it's ok, but the yelow and the red one hide the circle on their left. Thanks in advance for you...

How do i make a YouTube iframe clickable when it is behind an image via z-index?

jquery,html,iframe,youtube,z-index
I have a page I am making for a client where I need to display their videos from their youtube channel. I have some images of televisions which i have put the YouTube iframes inside of using z-index. As the videos are behind the images I cannot click on them...

Drop-down menu not working in chrome

css,google-chrome,drop-down-menu,z-index
I'm having issue with my drop-down menus on both windows and mac versions of chrome. I tried some fixes out there but I can't figure it out. Any advice would be great! I think there is a z-index issue, but I can't figure out where it is. Here is the...

z-index not setting in Bootstrap

html,twitter-bootstrap,z-index
I am using bootstrap and I have a modal that pops up and it works just fine only the .modal-dialog has a z-index of 0 even though it DOES get set. The .modal-backdrop.n has a z-index of 1030 and that works just fine so the .modal-dialog is being put in/under...

Z-index issues, z-index isn't working as it should

javascript,jquery,css3,z-index
My issue is when ever the links are hover, the hidden sub menu pushes the below div with it. I've tried playing around z-index but still no luck. Can someone please help me with this. my jsfiddle HTML: <div class="row" id="top-eybrow"> <div class="eyebrow-section right text-left"> <ul> <li> <a href="#">Sign in</a>...

Z-Index issue in my CSS

html,css,sass,z-index
so I am working on creating a new portfolio for myself and I have just hit a little wall with a CSS issue while trying to style my social icons a certain way. The desired effect I am going for can be seen here: My Social Icons Demo. However, if...

Stacking order of elements affected by opacity

css,css3,z-index
How are z-index and opacity related when deciding stacking order of an element in HTML? when i keep opacity less than 1 on an element which is having some z-index say 999. The element is going behind the element which is having no z-index. $(function() { $("#checkbox1").on("change", function() { $("#green-parent").toggleClass("add-opacity",...

How can I change the zIndex attribute of aui-datepicker in Liferay Portlet 6.2

datepicker,liferay,z-index,liferay-aui,alloy-ui
I have discoveder one problem with date field in portlet in LF 6.2. The problem is that after clicking on the input field, the datepicker is displaying, but with zIndex=0, that means it is under the portlet. If I change on firebug that parameter to 1, everything is OK. I...

CSS z-index not working as expected

css,z-index
I recently started learning CSS3 Animations and I built a small page to test these animations. But I'm facing a problem regarding the z-index. In my test page there is an island on left-bottom corner and two waves on the bottom of the window. See here I want to put...

Trying to hide fixed navigation bar behind cover image while scrolling with z-index

css,css-position,z-index
I have 2 navigation bars, 1 is fixed other is not. After the fixed navbar comes a cover image. And i want the fixed navbar to be behind it until it ends. But when i used z-index: -1; then i won't be able to click on it afterwards... And if...