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.
Related
I have a simple webpage that has a header, dynamic content, and a sticky footer. In the footer, I have a form that has text input and a submit button.
In situations where the content extends beyond the visual area of the page, the sticky form behaves as expected (it's visible at the bottom of the visible area).
I noticed that when I input text changes into the text field of the form, the dynamic content will automatically scroll to the bottom. I have implemented a hack to scroll the content back to it's original position, but I was wondering if there was a way to disable the scrolling behavior to begin-with...
https://jsfiddle.net/vy8h77xr/18/
html:
<div class="list" id="list">
<ul>
<li>content</li>
<!-- add more content to fill beyond the page -->
</ul>
</div>
<div class="footer">
<form id="form">
<input type="text" id="text"/>
<input type="submit" value="Submit" id="submit" />
</form>
</div>
css:
.footer {
position: sticky;
bottom: 0;
}
js:
var text = document.getElementById("text");
text.addEventListener("keydown", (e) => {
var y = window.scrollY;
setTimeout(() => window.scrollTo(0, y), 0);
})
You are using sticky footer but with 0px from the bottom, so you don't exactly need this kind of position. Try tu simply make your footer fixed like this.
.footer {
position: fixed;
bottom: 0;
}
https://jsfiddle.net/Andrej_v/vy8h77xr/20/
You can find more about this position here:
https://developer.mozilla.org/en-US/docs/Web/CSS/position
I know I'm late to answer this. but you can easily to this by making a whole new footer sticky, and make the orignal footer constant on bottom: 0; You can Use Jquery Clone Method To Clone your orignal sticky footer. Then You'll just have to change the id and be careful while using the for attribute. it has the match the clone elements id.
My problem is when i try to select in my selectbox my button move below to the select dropdown list.
I want to make the button stay even if the dropdown list in selectbox appear.
current output:
http://jsfiddle.net/GZSH6/2/
html:
<div class="form-group input-group fixedBtn">
<button type="button" class="btn btn-warning"><span class="glyphicon glyphicon-list-alt"></span> Create Account</button>
</div>
</div>
css:
.fixedBtn {
position: fixed;
display: block;
}
I wouldn't bother with fixed or absolute positioning as it can be fickle and is not very extendable. Instead, put a height on the wrapping element and set the overflow to visible.
.col-sm-offset-1.col-sm-12 { height: 32px; overflow: visible; margin-bottom: 1.0em; }
Here is the jsFiddle: http://jsfiddle.net/mifi79/JvFV9/2/
The problem with the absolute positioning answers is that if you were to add another form field above it, it would break the display (here is the Fiddle to demo how the other solutions break)
Try this:
.col-sm-12:not(.col-sm-offset-1) { position:absolute; top:50px; }
(you can tweak with the top value to get it exactly how you want it).
jsFiddle demo.
It's not enough to set its position to fixed (or absolute for that matter). You need to set its coords explicitly.
<button style="position:fixed;top:45px;" type="button" class="btn btn-warning input-md">
<span class="glyphicon glyphicon-list-alt"></span> Create Account
</button>
In this case, I'll set its top coordinate to 45px.
I am trying to align an HTML element on the right even when the window is resized. I have tried using CSS
#goRight
{
align:right;
}
along with float:right: , text-align:right but the problem is that when I decrease the size of the window horizontally the element is cut out and eventually disappears, which is not what I want. Is there a way to keep the element aligned to the right of the active viewing screen?
<div id="address" class="tab">
Filter by:
<hr />
<div class="label">Choices:</div>
<div id="goRight">
<select name="myselect" id="myselect" size="0">
<option>Option1</option>
<option>Option2</option>
<option>Option3</option>
</select>
</div>
<div class="listSeparator"></div>
</div>
float:right is simply aligns a html element to right, even window size is changed, element will still right aligned.
In your case i think another element / style breaks your right align style. Because just float:right is works. Simple fiddle at: jsfiddle.net/T5F83
You'll probably want to position the element absolutely and set it's right property like so:
#goRight
{
position: absolute;
right: 0;
}
.calendarList {
background-image: url('/resource3/hpsc/common/images/calendar.png');
background-position: 135px 50%;
background-repeat: no-repeat;
cursor:pointer;
}
<input type="text" id="toDatepicker" class="calendarList" name="searchEndDate" size="20" >
Here the css class is applying totally to input text fields, when mouse over on text field, the cursor is showing hand symbol total input field,
I what to show the hand symbol for that image only not for whole text field.
I don't think it's possible what you're trying to do.
Maybe you can add the image as a regular image (not as bg) and use some position: absolute and z-index to place it behind or in front of the textbox.
I suppose you could make it happen with JavaScript, but it would be quite a convoluted solution. It's easier if you make the image a label instead of a background picture and position it on top of the input field.
<input type="text" id="toDatepicker" class="calendarList" name="searchEndDate" size="20" >
<label for="toDatepicker" id="datepickerLabel>
<img src="/resource3/hpsc/common/images/calendar.png" />
</label>
CSS:
#datepickerLabel {
position:relative;
left:-20px;
cursor:pointer;
}
See http://jsfiddle.net/tNwTz/ for a demo.
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.