I am trying to use z-index on some elements in a page. Basically, I have a contact form with a waiter and a response box. The contact form is used on the page in a different place and is working fine ...
Send button is pressed, overlay-1 covers the form, ajax response triggers a thank-you box that covers overlay-1
Now this all works fine for the form that is positioned relatively on the page. However, I have the exact same form that pops up on-top of everything but my z-indexes aren't being honoured even though the form uses the same classes.
Can anyone give me any pointers ?
Alex
HTML:
<div id="popuporderform" class="orderform">
<!-- .resultBox injected here -->
<form method="post">
<input name="name" type="text" />
<input class="send" type="submit" value="Send" />
</form>
</div>
<!-- .orderspinner injected here -->
CSS:
/* -- ORDER FORM -- */
div.orderform {
width: 220px;
background-color: #fff;
height: 300px;
}
// This ID is for the pop up version of the form and is not used in the
// form that is within the layout of the page
#popuporderform {
position: absolute;
top: 100px;
left: 100px;
z-index: 200;
}
// this is the overlay with spinner in it -- this DOES overlay the form
.orderspinner {
position: absolute;
opacity: 0.9;
filter: alpha(opacity=90);
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
z-index: 250;
background: #fff;
}
// This is the thank-you box - it should appear over the .orderspinner (but isn't)
.resultBox {
display: block;
width: 150px;
height: 100px;
background-color: #fff;
position: absolute;
z-index: 300;
border: 1px red solid;
color: #000;
}
FIXED:
I injected the overlay into the div rather than outside it therefore putting it into the same z-index context.
HTML:
<div id="popuporderform" class="orderform">
<!-- .orderspinner injected here -->
<!-- .resultBox injected here -->
<form method="post">
<input name="name" type="text" />
<input class="send" type="submit" value="Send" />
</form>
</div>
I had trouble with this a while back. My problem turned out to be connected to stacking context, basically when you have an element with a z-index it starts a new stacking context in within it meaning that the z-index of elements within will not be compared with z-index of elements out side.
What adds to the complexity of things is that IE 6-7 (I don't know about 8) starts a new stacking context when elements are positioned (absolute, relative).
so i would check the elements of your popup down to the root and try and give them a high z index and see if that fixes it. with a bit of trial and error you can probably find the problem.
Does the code that's supposed to be in the background use z-index? Have you tried changing the z-index to ridiculously large values to see if it's competing with some other component?
Hard to think of much else blindly.
Related
I use vue.js with muse.ui here, and only use javascript and css without jquery library.
Now footer position always on the top of keyboard everytime the input field get focus.
is it do(able) to make footer position behind the keyboard everytime input get focus ?
#foot {
position: absolute;
bottom: 0;
text-align: center;
margin-bottom: 30px;
}
<form>
<div class="wrapper">
<mu-text-field type="text" />
</div>
</form>
<footer>
<mu-col class="foot">blablablablablablabla</mu-col>
</footer>
In your CSS you have defined #foot (which is an ID).
In your html "foot" is set as class:
<mu-col class="foot">blablablablablablabla</mu-col>
Either "foot" has to be defined as class in CSS or referred to as ID in the
HTML
`<mu-col id="foot">blablablablablablabla</mu-col>`
OR
in css define foot as class, that is ,
.foot {
...
}
Say a user clicks a button that says "Search only within footwear." I want my search bar to reflect then this filter has been added by adding a small grey box to the beginning that says "Searching within footwear" like so:
I'd like the search input to begin after this box appears, and have the placeholder text shift over as well. What is the best way to implement this?
Including it at the left side of the input like this introduces some complications, because there's no way to embed an image inside of an input. You might consider adding the text over the input instead if you have the design freedom to do so.
To keep it on the left you can reduce the width of the input, and then add the filter before it, either as a pseudo-element, or some element that you populate with the text "Footwear".
Then, you match up the styling of the Footwear element with the input, so that it looks like a continuous input.
Something like this.
Or, if you can use a CSS framework, Bootstrap supports this behavior now.
Try something like this:
<form>
<div class="form-group">
<div class="col-xs-5">
<div class="input-group">
<span class="input-group-addon transparent"><span class="glyphicon glyphicon-user">Footwear</span></span>
<input class="form-control left-border-none" placeholder="User Name" type="text" name="username">
</div>
</div>
</div>
</form>
Either way, you can then dynamically change the value of the filter text using Javascript, whenever the user clicks on one of the filter buttons.
There's infinite ways to implement this. Which is the best depends mostly on your project's needs and scope. If you are going to add a lot of dynamic behavior to your page, I'd suggest you begin to take a look at modern view frameworks like Vue, React, Angular 2 and similar.
To get to the point and following what #Bricky says, you could simply put a div where the word "Footwear" would need to be, and populate it later via a click event.
See this example:
'use strict';
$('.filter').click(function (_) {
$('.current-filter').text('Footwear');
});
.toolbar {
padding: 15px;
background: #ff6347;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.search-wrapper {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
width: 300px;
background-color: #808080;
color: #fff;
}
.search-wrapper .current-filter:not(:empty) {
padding: 3px;
}
.search-wrapper input {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="toolbar">
<div class="search-wrapper">
<div class="current-filter"></div>
<input placeholder="Search..." />
</div>
</div>
<div>
<button class="filter">Footwear</button>
</div>
I've used some flexbox properties to maintain the box always the same size.
Pretty common question, and typically revolves around a current situation, so after reading up on a bunch of different solutions and trying to slide them in I thought I'd just ask the age old question myself based on my situation.
Situation
I've built a little page slider using jQuery, and it appears to work as expected, then I noticed the CSS height was still set to a default value I had used for testing. After removing it I can't seem to get the height of the parent to open to the height of the different children. I know that setting the position of the different divs to relative instead of absolute will display them, but then the divs aren't positioned correctly anymore (situated underneath each other). Other solutions I've found revolve around not using markup that is even remotely common to my own.
Question
Is there a CSS fix for this that allows me to leverage Bootstrap the way I have it set up, and the jQuery animation I've already written? Or is their any suggestion(s) that will make this work without too much alteration to the markup? I've tried a couple different variations and this seems to be the most stable.
Code
I've added it to a jsFiddle. I couldn't get the animation to work in the fiddle for some reason (works on my laptop in all browsers), but the default layout should be enough to see how the parent doesn't respect the child elements.
<style>
.container {
margin-top: 50px;
}
.row {
margin-bottom: 20px;
}
.windowBox {
overflow: hidden;
}
.box {
background-color: #FFF;
position: absolute;
width: 100%;
}
.page1 {
top: 0;
left: 0;
opacity: 1;
z-index: 999; /* set to be over page2 onload */
}
.page2 {
top: 0;
left: 0;
opacity: 0;
z-index: 99; /* set to be under page1 onload */
}
</style>
<div class="container">
<div class="row">
<div class="col-sm-12">Header text should be above either page.</div>
</div>
<div class="row">
<div class="text-center">
<button type="button" id="showPage1" class="btn btn-danger" disabled>Page 1</button>
<button type="button" id="showPage2" class="btn btn-primary">Page 2</button>
</div>
</div>
<div class="row">
<div class="col-sm-12 windowBox">
<div class="row">
<div class="box page1">
<div class="hidden-xs col-sm-6">...</div>
<div class="col-sm-6">...</div>
</div>
<div class="box page2">
<div class="col-sm-12">...</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">Footer text should be under either page.</div>
</div>
</div>
DEMO
Added an .over class to your markup.
Thats the only change made there.
css
Over class is the container of the windowBox.
We want this to have a hidden overflow because it will contain all our pages side by side.
.over {
overflow: hidden;
}
This is a fixed value unfortunately. Basically its the width of your window X pages. If your going to add more then just one page, you can set this value in JavaScript.
.windowBox {
width: 220vw;
}
Then we simply set the container to be a "kind of" fixed width.
responsive width.. so 95 of view port width is reasonable.
.box {
background-color: #FFF;
width: 95vw;
display: inline-block;
float: left;
}
And in the JavaScript instead of setting the left property you set the margin-left.
You only need to do this for the first element so. If you want to scroll to page 4 you can set the first pages margin to -4 * 95vw
How do you layer a div element ontop of other elements?
I want to make a slightly translucent div element using the opacity css option then place
the div on top of the webpage to darken it then place another div with a form on top of that.
I tried using the z-index but i couldn't get it to work very well.
How would i do this? Is there a better way to do this?
Here is the code, am i doing something wrong?
<div style="opacity:.3; width:200; height:200; background-color:#222021; position:relative; z-index:1000;"></div>
<div style="z-index:100;">
<form name="testform" >
<input type="text" placeholder="First Name"required/><br>
<input type="text" placeholder="Last Name" required/><br>
<input id="submit" type="submit" value="Submit" />
</form> </div>
I want the div to layer on top of the other elements.(the form in this case.)
Fiddle
You have to position the overlay/background fixed. With top/right/bottom/left set to 0, it will automatically fill the screen. A z-index of 16777271 will ensure it's on top of everything, as this is the cross-browser highest z-index. You can also set it to 999 or something, will do the same job I guess.
.overlay {
z-index: 16777271;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,.8);
}
The absolute centering method is grabbed from this pen, there are other methods to center something, too. The fiddle is not for production use, you should look at the pen I linked above.
The repro code is attached. It (basically) contains two div elements: red (fixed) and black (with text). When clicking on the black div, it is up-scaled and the text on it stays sharp. However, in 4 seconds the z-index of the black div changes and the black div becomes to be over the red div. Boom! Here the text becomes blurry (which is a big problem).
The "effect" is especially visible on iPhone 3GS, less noticeable on iPhone 4.
The question is: is there a solution/workaround to tweak every code, but not the red div code, so that the text on the black div will remain sharp?
I am here for any questions / clarification requests.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1255">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<script>
$(function() {
$("#main_div").bind("click", function() {
$("#wrapper").css({"z-index": -1});
$("#main_div").css({"-webkit-transform": "scale(1.4)"});
setTimeout(function() {
$("#wrapper").css({"z-index": 2});
}, 4000);
return true;
});
});
</script>
<title>Title</title>
</head>
<body>
<div id="wrapper" style="position: absolute; z-index: 2; visibility: visible; height: 598px; top: 150px; width: 972px; left: 20px;">
<div style="position: absolute; width: 972px; height: 598px; ">
<div id="main_div" style="position: relative; height: 375px; width: 610px; background-color:rgb(2,2,2); -webkit-transform-origin-x: 0px; -webkit-transform-origin-y: 0px;">
<div style="position: relative; padding-top: 26px; padding-right: 10px; padding-bottom: 26px; padding-left: 10px; font-size: 10px; ">
<div style="display: inline; font: normal normal normal 14px/normal arial; color: rgb(150, 150, 150); ">
<span>Here is some TEXT</span>
</div>
</div>
</div>
</div>
</div>
<div style="position: fixed; visibility: visible; height: 598px; top: 150px; width: 972px; left: 20px;">
<div style="position:fixed; bottom:0; right:0; width:70%; height:30%; background-color: red;"></div>
</div>
</body></html>
I was having similar issues with fixed-position elements dipping behind relative-positioned elements when zooming on the relative-positioned content. I was determined to figure out a solution.
When I changed the relative-positioned element back to static, all was well, but then that element was being covered by the fixed position elements. This was the reason I changed that element to relative to begin with... so I could put a z-index on it.
I also tried dynamically assigning the CSS styles of position and z-index, but that didn't seem to change anything either.
Then, I removed the 'left' CSS style from the stylesheet, and I dynamically assigned a style of 'right' via JS, with a value equal to the width of the window, minus the width of that fixed-position element, and this seemed to improve the issue, but not 100%.
Then I found your thread here, and tried your code. I uploaded an HTML file with your code to my server, then loaded that page up in my iPhone, and tried zooming around. I saw no such issues with your text being blurred. Odd enough.
So then I went back to my other page, refreshed, and all was well, even with the fixed-position elements dipping behind the relative-positioned element.
Thus, it seems this is a bug, perhaps caused by low memory or something. I'm not 100% sure, but without being able to reproduce the issue so easily, it may be hard to report such a bug to Apple's iPhone/Safari Mobile development team. :\