I have a question ....
In my webpage here
But when you scroll how can i do so the fixed header is on top of all content ?
Use the z-index CSS property on the element you want to put over the others.
The z-index property specifies the stack order of an element.
An element with greater stack order is always in front of an element
with a lower stack order.
#sticky {
z-index: 1;
}
Use 1 or more, depending on the value of the other z-indexed elements.
Use z-index to place your header on top:
#sticky{
z-index: 1;
}
Add this CSS
#sticky {
background-color: #FFFFFF;
display: inline;
margin-top: -15px;
position: fixed;
width: 1200px;
z-index: 1;
}
add z-index with a large number like this:
#sticky {
position: fixed;
background-color: white;
width: 1200px;
margin-top: -15px;
display: inline;
z-index: 99999; /* added */
}
z-index reference
Related
I have read that in order for z-index to take effect, the CSS elements involved need to have "position" attributes. So I have a menu that I would like to appear over an IMG when someone clicks on the menu icon. I have these styles for the menu and the image in the content area ...
.menu-btn div {
position: absolute;
left: 100%;
top: 0%;
padding-right: 8px;
margin-top: -0.50em;
line-height: 1.2;
font-weight: 200;
vertical-align: middle;
z-index: 99;
}
#personImgDiv {
position: relative;
z-index: 100;
display: table-cell;
width: 80%;
}
However, when I click on the menu icon, the menu is still appearing behind the image -- https://jsfiddle.net/bdcmka1r/2/ . What else am I missing? How do I get the menu to always appear in front?
This is because you're using the wrong selector. .menu-btn is the button class, and it will only affect this button, also there is no way a button can be treated as a container element such as div, nav, header ..etc. Your correct selector will be nav since your menu contained within nav tags. So, you need to add the position and z-index properties to nav selector instead.
nav {
display: none;
width: 100vw;
padding: 0rem;
background-color: red;
position: absolute;
z-index: 9999;
right: 0%;
top: 100%;
text-align: left;
}
#personImgDiv{
position: relative;
z-index: 100;
}
header{
z-index: 101;
}
I see. you have used z-index:100 in porosinIngDiv and you want to display menu over on image so you have to use z-index more in header then #personImgDiv i have given answer on top it will more clear
After my website was completed, everyday I am trying to modify things that would make it more responsive. It's made in Muse so don't expect much of "responsiveness".
I have an element with this class:
#labelstrong
{
z-index: 17;
width: 633px;
background-color: transparent;
color: #FFFFFF;
text-align: justify;
position: fixed;
top: 1542px;
left: 164px;
}
Normally, the element is in the middle of the screen. But when I zoom out, the element maintains the same distance to the top of the screen (because of the top attribute of course). How can I define its position in a way that even if I zoom in or out it will still be in the middle of the screen.
UPDATE:
The problem is (and I forgot to mention it) that the position must be fixed as there is an horizontal scrolling feature for all elements ( they come from the right of the screen) and so they have to be on a fixed position.
UPDATE 2: Here is a live example. Imagine that the class is applied on each TAG (not the menu of course).
http://2323029s8s8s8.businesscatalyst.com/index.html
You can add for those big tags the following css:
.fixed-big-tag{
top: 50%;
transform: translateY(-50%);
}
Also as a counter measure, make sure the <body> and the <html> have 100% heights
Another idea would be to use the !important rule for the top property to overwrite what Muse outputs.(or any rule that needs to be overwritten)
If it works, you could probably add a new class on all these tags that need to be centered and overwrite it via css
Check it out, and let me know how it goes.
See this resource for techniques to centering elements using CSS: Centering in CSS: A Complete Guide
If you create a relatively-positioned parent container element, you can center your child element easily:
.parent {
position: relative;
}
#labelstrong {
z-index: 17;
background-color: transparent;
color: #FFFFFF;
text-align: justify;
position: absolute;
width: 634px;
height: 40px;
top: 50%;
left: 50%;
margin: -20px 0 0 -317px;
}
Note that the margin offsets are half of the width and height.
Try using percentages instead of pixels, like:
top: 10%;
If you want to horizontally center, try setting the margin to auto:
margin: 0 auto;
Your code would look like this:
#labelstrong {
z-index: 17;
width: 633px;
background-color: transparent;
color: #FFFFFF;
text-align: justify;
position: relative;
top: 10%;
margin: 0 auto;
}
Take a look at this example: http://jsfiddle.net/5a6fyb21/
jQuery would be your best bet.
I would just set your class to a fixed position then try using the following.
$(window).resize(function() {
var middle = $(window).height();
$('.middle').css('top', hello / 2);
});
The resize function is used so that it will remain in position if the window is resized.
Centered label over horisontally scrollable content:
http://jsfiddle.net/cqztf9kc/
.fixed {
margin: 50%;
position: fixed;
z-index: 1;
}
.content {
x-overflow: scroll;
height: 100%;
}
I want to be able to display a DIV in a fixed position and have its width fit to content but each time I add position: fixed;, the div gets computed to display: block; and the div becomes full length.
HTML:
<div class='veil'></div>
CSS:
.veil{
display: inline-block;
position: fixed;
top: 34%;
left: 0;
right: 0;
margin: 0 auto;
background-color: lavender;
}
each time I add position: fixed;, the div gets computed to display: block; and the div becomes full length.
It's not display: block, it's position: fixed makes div stretch relatively to browser window, and since you have left: 0 and right: 0 you observe this behavior that div takes all window width.
Depending on your HTML structure you can use position: absolute instead or as pointed in comments (thanks #Paulie_D) don't use right: 0.
Just add another container.
and split the contradiction in CSS between them.
HTML:
<div class='container'><div class='veil'></div></div>
CSS:
.container
{
position: fixed;
top: 34%;
left: 0;
right: 0;
}
.veil
{
display: inline-block;
margin: 0 auto;
background-color: lavender;
}
I have a problem understanding z-index properly.
Please have a look at this fiddle I created for you: http://jsfiddle.net/df3EL/
<div id="content">
1. Content
<div id="popup">
3. PopUp
</div>
</div>
<div id="footer">
2. Footer
</div>
I'm aware of positioning and opacity influencing z-index. But with this markup, no matter what I try, the footer is above 1 & 3 or below - never in between.
Is there any way to make the order (1, 2, 3) work, without changing the html markup?
z-index inherits from the parent element
So if your 1 element has a z-index of 100, your 3 element cannot exceed that value in the global scope. In the local scope (within the #content element), the z-index will essentially "reset"
So to make your thing work, you'll need to change the HTML markup to make each element independent (so they can have sequential z-index in the global scope)
if you want popup be hover footer, just set index for footer and popup : http://jsfiddle.net/df3EL/1/
div {
font-family: Verdana;
font-size: 11px;
padding: 20px;
}
div#content {
display: block;
height: 150px;
width: 250px;
background: #eee;
position: relative;
}
div#footer {
display: block;
height: 50px;
width: 250px;
background: #eeefc0;
position: relative;
left: 25px;
top: -25px;
z-index: 1;
}
div#popup {
display: block;
height: 140px;
width: 100px;
background: #C0C0EF;
position: relative;
left: 220px;
top: -5px;
z-index: 2;
}
[http://jsfiddle.net/df3EL/3/][1]
Remove all z-index property except div#popup
It should work in modern browser (suppose ie9+, chrome, opera, FF)
But more logical way move #popup after #footer (may be it should do with javascript when needed to show popup)
You have used position:relative for div#footer and div#popup. Change this to position: absolute and change the vaules top, bottom, left,right to get the desired result.By this you won't have to change your html structure.
I have the following html...
<div class="header"></div>
<div class="main"></div>
<div class="footer"></div>
And following css...
.header{
position: fixed;
background-color: #f00;
height: 100px;
}
.main{
background-color: #ff0;
height: 700px;
}
.footer{
position: fixed;
bottom: 0;
background-color: #f0f;
height: 120px;}
But why the header and footer is not fixed, anything I did wrong? I want only "main" to be scrollable and "header" and "footer" to be at a fixed position. How to do?
+-------------------------------------+
| header | -> at fixed position (top of window)
+-------------------------------------+
| main |
| |
| | -> scrollable as its contents
| | scroll bar is window scroll bar not of main
| |
| |
+-------------------------------------+
| footer | -> at fixed position (bottom of window)
+-------------------------------------+
See this fiddle
My issue was that a parent element had transform: scale(1); this apparently makes it impossible for any element to be fixed inside it. By removing that everything works normally...
It seems to be like this in all browsers I tested (Chrome, Safari) so don't know if it comes from some strange web standard.
(It's a popup that goes from scale(0) to scale(1))
if a parent container contains transform this could happen. try commenting them
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
you need to give width explicitly to header and footer
width: 100%;
Working fiddle
If you want the middle section not to be hidden then give position: absolute;width: 100%; and set top and bottom properties (related to header and footer heights) to it and give parent element position: relative. (ofcourse, remove height: 700px;.) and to make it scrollable, give overflow: auto.
Double-check that you haven't enabled backface-visibility on any of the containing elements, as that will wreck position: fixed. For me, I was using a CSS3 animation library...
Working jsFiddle Demo
When you are working with fixed or absolute values,
it's good idea to set top or bottom and left or right (or combination of them) properties.
Also don't set the height of main element (let browser set the height of it with setting top and bottom properties).
.header{
position: fixed;
background-color: #f00;
height: 100px;
top: 0;
left: 0;
right: 0;
}
.main{
background-color: #ff0;
position: fixed;
bottom: 120px;
left: 0;
right: 0;
top: 100px;
overflow: auto;
}
.footer{
position: fixed;
bottom: 0;
background-color: #f0f;
height: 120px;
bottom: 0;
left: 0;
right: 0;
}
I had a similar problem caused by the addition of a CSS value for perspective in the body CSS
body { perspective: 1200px; }
Killed
#mainNav { position: fixed; }
As others pointed out, certain CSS properties on a parent element will prevent position: fixed from working. In my case it was backdrop-filter.
This might be an old topic but in my case it was the layout value of css contain property of the parent element that was causing the issue. I am using a framework for hybrid mobile that use this contain property in most of their component.
For example:
.parentEl {
contain: size style layout;
}
.parentEl .childEl {
position: fixed;
top: 0;
left: 0;
}
Just remove the layout value of contain property and the fixed content should work!
.parentEl {
contain: size style;
}
Another cause could be a parent container that contains the CSS animation property. That's what it was for me.
For anyone having this issue primarily with navbars, not sticking to the top, I found that if any element in the parent container of the positon: fixed; element has a width exceeding 100% - so creating horizontal scrollbars - is the issue.
To solve it set the 'parent element' to have overflow-x: hidden;
You forgot to add the width of the two divs.
.header {
position: fixed;
top:0;
background-color: #f00;
height: 100px; width: 100%;
}
.footer {
position: fixed;
bottom: 0;
background-color: #f0f;
height: 120px; width:100%;
}
demo
You didn't add any width or content to the elements. Also you should set padding top and bottom to your main element so the content is not hidden behind the header/footer. You can remove the height as well and let the browser decide based on the content.
http://jsfiddle.net/BrmGr/12/
.header{
position: fixed;
background-color: #f00;
height: 100px;
width:100%;
}
.main{
background-color: #ff0;
padding-top: 100px;
padding-bottom: 120px;
}
.footer{
position: fixed;
bottom: 0;
background-color: #f0f;
height: 120px;
width:100%;}
You have no width set and there is not content in the divs is one issue. The other is that the way html works... when all three of fixed, is that the hierarchy goes from bottom to top... so the content is on top of the header since they are both fixed... so in this case you need to declare a z-index on the header... but I wouldn't do that... leave that one relative so it can scroll normally.
Go mobile first on this... FIDDLE HERE
HTML
<header class="global-header">HEADER</header>
<section class="main-content">CONTENT</section>
<footer class="global-footer">FOOTER</footer>
CSS
html, body {
padding: 0; margin: 0;
height: 100%;
}
.global-header {
width: 100%;
float: left;
min-height: 5em;
background-color: red;
}
.main-content {
width: 100%;
float: left;
height: 50em;
background-color: yellow;
}
.global-footer {
width: 100%;
float: left;
min-height: 5em;
background-color: lightblue;
}
#media (min-width: 30em) {
.global-header {
position: fixed;
top: 0;
left: 0;
}
.main-content {
height: 100%;
margin-top: 5em; /* to offset header */
}
.global-footer {
position: fixed;
bottom: 0;
left: 0;
}
} /* ================== */
I had the same issue, my parent was set to transform-style: preserve-3d; removing it did the trick for me.
We'll never convince people to leave IE6 if we keep striving to deliver quality websites to those users.
Only IE7+ understood "position: fixed".
https://developer.mozilla.org/en-US/docs/Web/CSS/position
So you're out of luck for IE6. To get the footer semi-sticky try this:
.main {
min-height: 100%;
margin-bottom: -60px;
}
.footer {
height: 60px;
}
You could also use an iFrame maybe.
This will keep the footer from 'lifting off' from the bottom of the page. If you have more than one page of content then it will push down out of site.
On a philosophical note, I'd rather point IE6 users to http://browsehappy.com/ and spend the time I save hacking for IE6 on something else.
You can use it in the same way because if the parent container has the transform effect, you could create a child where it occupies 100% of the parent container and add a position realtive and then the container that you want to add the position fixed and it works without problems.
might be an answer for some cases https://stackoverflow.com/a/75284271/7874122
TLDR position: fixed is attached to containing element, by which element is positioned. if containing block is different than viewport dimensions, fixed element will be placed according to containing block.