Questions tagged [z-index]

z-index represents the order on the z-plane in which an element appears. An element with higher stack order is always in front of another element with lower stack order. It is available in most of the GUI frameworks (both Web and Desktop).

0
votes
1answer
38 views

CSS make child to topmost using z-index

https://codepen.io/anon/pen/QZVVbY I want the code above of the green box to be topmost. But apparently, it's under another small z-index container. I don't want to change parent z-index. How to ...
1
vote
2answers
28 views

Why a button doesn't work in any layer of CSS?

I'm having a hard time understanding why a button doesn't work within the styles of a hero image. I've tried adding a z-index to bring it to the top, but nothing is making sense why this button is ...
-1
votes
0answers
38 views

Z-index after js append

In mobile, I have to change DOM var windowW = $(window).width() var windowH = $(window).height() console.log(windowH) if(windowW < 768) { $('.parent').css('height', (windowH - 72) + 'px').append(...
1
vote
3answers
26 views

How to make a div under another one receive a hover event?

Here is an example code that demonstrate the issue .under { position: absolute; top: 10px; left: 10px; border: 2px solid blue; width: 150px; height: 150px; } .under:...
0
votes
2answers
37 views

Angular 6 z-index and animation issues

I have this code: https://stackblitz.com/edit/angular-u1ctge with the following Font Awesome icon code (for angular using FortAwesome) <fa-icon [icon]='["fas","cogs"]' spin size='4x' style='z-...
2
votes
0answers
32 views

React Native: ZIndex with dynamic views

I'm new to React Native and trying to build an app in which I present a tiled overview to my user. I construct this tiled overview with a FlatList with 3 columns. I need to make it look like all items ...
0
votes
2answers
25 views

Does the z-index affect the linear background?

Here's my code: #Bar { background-image: linear-gradient(Aquamarine, Lavender); z-index: 2; position: fixed; margin: 0px; } AboutMy dogsBibliographyHome For some reason the ...
0
votes
2answers
30 views

Issue with z-index and transformations

This has been asked before but none of the answers seem to be working for me. My issue is related to a lost z-index when a transformation is applied. I have an overlay div with a defined z-index, it ...
0
votes
2answers
35 views

Container div with background-color hides table cells

I was trying to make a tr hover style that applies a box-shadow effect to the row that you are hovering, and I found out that the solution that I made doesn't work if I put the table inside a div that ...
0
votes
0answers
25 views

WPF/MVVM - Changing the ZIndex of items in an ItemsControl [duplicate]

I have an ItemsControl that displays a UserControl as a View with a collection of ViewModels as the underlying DataSource. SceneView.xaml: ... <ItemsControl ItemsSource="{Binding CardsCollection}"...
0
votes
0answers
25 views

Proper use of z-index on DnD

I am trying implement a Drag & Drop using https://github.com/gardiner/draganddrop but it seems I am stocked with the library not letting me click on the component as show in the Codeply even with ...
0
votes
1answer
50 views

Background color hiding other box-shadow

I have a table, and I want to set some styling when you hover a row, so I used box-shadow, and added the corresponding z-index to make this work. The problem is that when I set the tds to have a ...
0
votes
0answers
25 views

how to correctly use z-index and transform on siblings and children

Context: I have a photos gallery that I'm using transform to move from slide to slide On each slide, i have a button that needs to be clickable, but if you click outside the button it should trigger a ...
0
votes
2answers
32 views

Pull to refresh text is placed above tableview

I am trying to have my entire refreshControl placed behind the tableview. I am able place the actual spinner by doing this: self.tableView.addSubview(refreshControl) self.tableView.sendSubview(...
0
votes
0answers
6 views

My hover elements for opacity and z-index are not working

I am attempting to have my images pop out of their gallery view- move forward in perspective and enlarge- while having the surrounding images lessen in opacity. Here's a snippet of the HTML layout: ...
3
votes
3answers
43 views

HTML Dropdown box shifting html elements downwards

So I'm trying to make a dropdown list overlap the elements below when expanded. Unfortunately, even when elements in the same stacking context have a position, and dropdown container div set to a z-...
3
votes
1answer
48 views

Why do the subsequent elements overlap when using the same number z-index?

I wrote the following source code. In this HTML and CSS, .box2 is displayed above.box3 when hovering to .box3. But this was different from my expectation. This code expect that box1 andbox2 will ...
3
votes
1answer
86 views

Safari Browser z-index or Transform CSS Property Issue - Elements Not Visible / Backgrounded

I've got an issue with visibility of HTML elements in Safari (Mobile and Desktop) not rendering in the foreground that I've spent at least 8 hours of dedicated troubleshooting on trying to address. ...
0
votes
0answers
12 views

While animating opacity, z-index not respected [duplicate]

I'm on my first SVG "montage" animation and I have this little problem. 3 elements positioned "absolute" with corresponding z-index. The 2 first SVG "object > embed" and the third a simple div with bg ...
0
votes
2answers
26 views

Certain Elements not effected by z-index using after pseudoclass

So I'm creating a landing page with a 100vh image that has a faded white overlay, using the following: #showcase { display: flex; flex-direction: column; align-items: center; ...
1
vote
2answers
30 views

How to show inline span Text in anchor, on top of anchor Text

i have created following Code, please check it out on .tooltip1 { z-index: 1; position: relative; } .tooltip1 .tooltiptext { ...
0
votes
0answers
18 views

View disappear after setting zIndex to component

I do have this layout, everything worked fine until I added zIndex to a scrollView, the header disappear, tried to give it a bigger zIndex than component didn't work, how I am suppose to make this ...
3
votes
1answer
45 views

zIndex on ComboBox in WPF?

I need to have three combo boxes in a same data grid cell, like so: <Grid Name="gridFormat_1" Grid.Row="1" Grid.Column="6" Margin="0, 5, 5, 5" > <Grid.RowDefinitions> <...
1
vote
3answers
49 views

How to Overlay Image on Background in Twitter Bootstrap Section

I have an image that I would like to overlay on top of a background gradient that I have set on a section element. Both the background gradient and image I am setting in CSS and calling via a class in ...
0
votes
1answer
42 views

React DatePicker calendar showing behind table head

I was using react datePicker and fixed-data-table-2 for my project. When I open the calendar, it shows behind table head. Here is the code for CSS file: .ui-datepicker { z-index: 9999 !important; }...
1
vote
1answer
65 views

Is there a way to radiograph through layers of underlying components

Task description: There is an element which contains another element which in its turn contains another element (theoretically there can be a sequence of inner elements). The last element has ...
0
votes
1answer
16 views

Is it possible for a position fixed element to pass both under and over sections using fullpage.js?

I have two components in a page, a position fixed element which covers the browser window which has a child image with transparent background, and a fullpage.js vertical slider powered by CSS ...
0
votes
2answers
48 views

How to make z-index of the blocks below to be less than the one of the block above

Task description There are number of block which contain absolutely positioned elements. These absolutely positioned elements should overlap the absolutely positioned elements contained in the blocks ...
0
votes
0answers
37 views

Problem with Styling and Visibility while showing modal in Angular 4 Application --

Facing problem with opening and displaying a modal in my Angular4 .NET Application. I would click a link and consecutively a modal would show. In my case the date link for invoice number [pl see the ...
0
votes
0answers
35 views

How to position Dropdown content behind dropdown button using css

How to position Dropdown content behind dropdown button using react jss . I tried using {position: absolute; z-index: 2} for the button and {position:absoulute; zindex:1} for the dropdown ...
0
votes
0answers
7 views

Cannot show Modal Backdrop in the back of modal dialog using Bootstrap 4 Modal Dialog

I have placed this modal dialog in a page: <div class="modal fade" id="editModal" tabindex="-1" role="dialog"> <div class="modal-dialog modal-dialog-centered" role="document"> <div ...
0
votes
2answers
44 views

Trying to use z-index with divs

I try desperately to find a solution to my z-index problem. So here I have a div containing 2 other div who respectively have a different background image. I would like to superpose the divs to have ...
1
vote
3answers
55 views

How to get drop down menu to show over google maps?

I am trying to get a Menu on the right corner of my screen to drop down over google maps. I can get it to drop down, but it is hidden behind google maps. I have looked and keep finding posts about z-...
2
votes
1answer
43 views

Clickable image within figure and overlaid paragraphs

I'm having trouble making my image clickable. I have a <figure> that is wrapped over an image and some paragraph elements. I also have some CSS such that when you hover over the figure, the ...
0
votes
1answer
162 views

Z-index in ConstraintLayout

I have a simple ConstraintLayout: <android.support.constraint.ConstraintLayout android:id="@+id/basketLayout" android:layout_width="match_parent" android:layout_height="match_parent"&...
1
vote
2answers
30 views

React, z-index for each array element

Not long ago here I recieved answer, how increase each img as member of array. Somehow the same principle don't wokrs for z-index (increaced img should lie on top of the rest), though console displays ...
0
votes
1answer
46 views

CSS Z-index not overlapping [duplicate]

So I was trying to customize a website with CSS but I cannot overlap this image under this element. The code: body#bodyDefault > form > div > table > tbody::after { pointer-events: ...
0
votes
1answer
25 views

Safari z-index Bug

I have two containers, and the first one has to cover a part of the second one. I did this with z-indexes, and it works just fine on desktop and on the device toolbar. But when I access the website ...
2
votes
3answers
35 views

progress bar, overlapping of elements and z-index: how can I make it work?

I have here a progress bar containing three html elements : a yellow block, a red block, and a text block,used as label for the progression. demo : https://codepen.io/anon/pen/wEgJmL <p class="...
0
votes
2answers
36 views

menu within table cell not responding to z-index

I have a table similar to the one here: https://codepen.io/roberttaraya/pen/QVGRqg animated gif of table html <!doctype html> <html lang="en"> <head> <meta charset="utf-8"&...
1
vote
1answer
48 views

Links don't do anything when clicked

I'm having a real tough time with some links I'm trying to click in a 'Dropdown' menu items that I made via Bootstrap. I suspect a z-index issue but I have tried to set my position to relative and ...
-1
votes
1answer
37 views

CSS translation bug in Firefox

I'm facing a weird bug with Firefox. I have a side menu, with a static position. When I am in smartphone format, this menu disappears after a menu item is selected. The menu slides to the left and ...
2
votes
3answers
49 views

How do I center my inline buttons which using the z-index and an absolute positioning?

I have set up Slick slider to display a carousel of images for my log in page. I have read that in order to have buttons on front of the carousel I had to utelise position: absolute and z-index: 1 in ...
2
votes
2answers
66 views

css z-index issue with nested elements

I have 3 HTML elements that I want to order on the z plane: .bank { width: 200px; height: 200px; background-color: grey; position: absolute; z-index: 100; transform: ...
0
votes
1answer
17 views

Nested fixed element cannot be bigger than parent on iOs only

My issue only happens on iOs (on both Safari and Opera), works fine in Chrome, Firefox and even Opera on Windows and Android. I have the following situation: <div class="flex-box-parent"> &...
0
votes
0answers
17 views

C# WPF - MainFormPaint-Generated Image Layering Over Pre-Created PictureBox Image

I have quite literally scoured the INTERNET'S DEPTHS to try to find a solution to this problem. So here's the current scenario: I have a System.Windows.Forms.PictureBox that contains my main ...
0
votes
1answer
26 views

How set different z-Index between divs?

I have differents div at same level but i want to set different z-index. This is my jsfiddle: https://jsfiddle.net/k85t9zgq/8/ This is the screen: How can I make the red div visible only in the ...
0
votes
0answers
129 views

Mat-Dialog & Popover z-Index

I manually repositioned the Mat-Dialog from @angular/material and tried to force the Popover Plugin (I tried ngx-popper and ngx-bootstrap) content to show in foreground of the dialog but i couldn'...
0
votes
1answer
38 views

Z-index not working as expected - text showing under blocks

I am having a hard time solving this z-index issue so I would like to share it and ask for help in case someone had this problem too. What happens: When user hovers on each blocks, each tooltip is ...
-1
votes
1answer
21 views

Z-Index not showing element ontop of other elements

` <!DOCTYPE html> <html lang ="en"> <head> <meta charset ="utf-8"> <meta name ="viewport" content ="width = device-width, initial-scale = 1.0"> <link ...