Problems in chrome with overlapping divs using z-index and position: absolute

Question

Problems in chrome with overlapping divs using z-index and position: absolute

Navigation

#1 by (2 votes)

1

I have the following code that makes that when you work in a small window or zoom out to the window the divMenu in chrome overlaps the divPlegar (to fold or unfold the menu) and the divbody. I have tried different things, in IE11 it works correctly ( debugging and looking for the divMenu element I notice that it also occupies more against less zoom you give to the screen in IE11, but here it works well.) Will it be for z-index ? ) To see if someone can help me, I pass the code:

As I have the code right now, it just gives me the problem presented when folding and deploying in chrome, in IE11 it works well.

.divPlegar {
position:absolute;
z-index:2;
float:left;
background: url('img/ico_Exp.gif') center no-repeat;width:1px;height:5px;}

.divMenu {
position:absolute;
float:right;
width:10px;
height:100%;
z-index:1;}

.divBody {
z-index:0;float:left;width:90%;}

html css google-chrome

asked by Javier GT 05.09.2016 в 11:00

source

1 answer

Show typeahead dropdown on table-responsive How to get a value in SQL Server Chain

score 2 · Accepted Answer

Solved:

I tried the CSS a thousand different ways, I indicated before passing the code that I think the problem was in the order of overlap of the z-index between the menu and the body, and add in the body relative positioning because they have been the last changes and how they can appreciate unique and apparently everything works well for me. Here is the code:

.divPlegar {
position:absolute;
z-index:2;
float:left;
background: url('img/ico_Exp.gif') center no-repeat;width:1px;height:5px;}

.divMenu {
position:absolute;
float:right;
width:10%;
height:100%;
z-index:0;}

.divBody {
position:relative;z-index:1;float:left;width:90%;}

I hope that someone with similar problems will emphasize these styles.