This question already has answers here:
How can I bring an image in front of text HTML?
(2 answers)
Closed 2 years ago.
My header have the property "position: fixed", but, some images in the body has the property "filter: grayscale(100%)", when I scroll the page, the images are showed in front of my header.
HTML:
<header><header>
<img>
<img>
<img>
CSS:
header{
position: fixed;
}
img{
filter: grayscale(100%);
}
How can i put them behind my header?
Have you tried
header {
z-index: 1;
position: fixed;
}
If you have other elements with z-index`s set, you'll need to manage them in order.
You can read more about z-index here
Personally, I use :
z-index:9999
Try This
header{
position: sticky;
top: 0;
}
The HTML structure is important while using position: sticky, since it's make the element sticky relative to the parent. And the sticky positioning might not work with a single element made sticky within a parent.
In the header css rule add this: z-index: 100; position: fixed;
Related
This question already has answers here:
Position absolute but relative to parent
(5 answers)
Closed 6 months ago.
Take a look at my code: https://codepen.io/duncanbritt/pen/LYdXVJY and direct your attention to this snippet of CSS:
.precursor::after {
position: relative;
content: "";
width: 10px;
height: 20px;
background:rgb(179, 2, 2);
display: inline-block;
animation: cursor-blink 1.5s steps(2) infinite;
}
Currently, if you click on a character in the right pane of my web page, a cursor appears between it and the previous character. I would like for the cursor to not effect anything else in the document, but to still be tethered to the prior character.
If I simply change .precursor::after { position: absolute }, it looks great until I scroll. What can I do to solve this problem?
Thank you.
Solution:
Use
.precursor::after{ position: absolute; }
as you mentioned. And just add
.precursor{ position: relative; }
to your style-sheet and it will work.
Explanation:
This works because the element with position: absolute positions itself in relation to the nearest ancestor who has position: absolute or position: relative. By defining the position of the parent element as relative we are limiting the ::after pseudo element.
This question already has answers here:
How to make a div 100% height of the browser window
(39 answers)
Closed last year.
I’m trying to create an EMPTY div that takes up 100% of the viewport and that moves with the viewport (or position: fixed).
It also needs to be at top: 0, left 0 of the viewport. This is for a browser extension so I need this div to be added over any page.
The background reason for this is so I can use the div as a full page tooltip that shows the mouse x and y positions and the tooltip follows the mouse.
How can this full page div be achieved? My many attempts have failed to create a div with any height.
I am away from my pc but can add what I’ve tried already soon.
Try this
{
position:absolute;
inset:0;
width:100vw;
height:100vh;
}
first add an empty div to body then use this :
{position: fixed;
top: 0;
left: 0;
background: red;
right: 0;
z-index: 999999999;
bottom: 0;}
this pure css code is enough and you dont need any javascript even after resize.
.empty-div {
position: fixed;
inset: 0;
}
The inset property is a shorthand for top, right, bottom and left which will stretch the div to all corners.
In order to place the div at the very top, over everything else, it's best to insert the div at the very end of the page; just before the closing </body> tag.
To be on the safe side, you can also add z-index: 9999999.
Try this stylesheet and with some JavaScript code will help you to achieve a full page div.
#full-page-div {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: none
}
I have added the extra "overflow: none" because height may get more than browser window's height and we don't need to show the scrollbars.
Now, in the JavaScript code, we need to adjust the div height to the full page height, also need to add a handler to window "resize" event, so as to adjust that full page div height and width.
function ExtFullPageDivAdjust()
{
let fullPageDiv = document.getElementById("full-page-div");
fullPageDiv.style.height = Math.max(window.innerHeight, document.querySelector("body").clientHeight) + "px";
fullPageDiv.style.width = window.innerWidth + "px";
}
ExtFullPageDivAdjust();
window.addEventListener("load", ExtFullPageDivAdjust);
window.addEventListener("resize", ExtFullPageDivAdjust);
Try this
{
position: fixed;
height: 100vh;
width: 100vw;
}
I'm trying to make a sticky element in my website that it's made in wordpress with a custom template.
I was trying everything, from css (position: sticky) should work. But in my case is not.
Can you help me with this issue?
This is the structure of the page, on the left the sticky element that I want. On the right, the content
Thank you you very much for your time.
I have checked your code.Position sticky is not working as because one of the parent div has overflow:hidden property so basically position sticky is not working with overflow hidden so please apply below property in your css file and then check
<style>
aside.widget-area.col-xs-12.col-sm-12.col-md-4.col-lg-3.order-2-sm-sidebar {
position: sticky;
top: 80px;
height: 600px;
overflow-y: scroll;
}
#widthContent {
overflow: unset !important;
}
</style>
I need to position a header to be fixed within the containing parent so that it follows when scrolling. The problem is that
position:fixed
fixes the position to the browser, not the parent. What this is resulting in is that when I have a container that has a horizontal scroll for overflow in the width (the content is wider than the container), my fixed header does not have the overflow-scroll as the content of the table does.
See this fiddle demo
So the goal here is to fix the position of the header, but fixed relative to it's parent container. In this fiddle, you can see that I've commented out a block of css:
.container{
/*-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);*/
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
transform: none;
}
If you replace the current css block (with transform set to none) with the one with translateZ, the header will get positioned within it's parent container, but is no longer fixed.
Anyone know how to solve this? Preferred solution would be CSS/HTML only and avoid JS but if nothing else, then JS is of course what I need to go with!
CSS can't do this by itself.
Position: fixed works in relation to the viewport, not it's containing element.
I've seen an attempt to solve this problem using the CSS3 transform property, but (as you noted in your comment to my first answer) it doesn't seem to work.
I understand you can't use any client-side library but that's the only solution available to my knowledge. For you and others who may one day need this, here's a solution that works. It employs a bit of jQuery:
Positioning an element inside another element with the positioned element fixed along the x and y axes (i.e. position fixed horizontally and vertically).
http://jsfiddle.net/8086p69z/8/
HTML
<div class="moving-article">
<div class="container">
<header class="fixed-header">FIXED HEADER</header>
<ul>
<li>SCROLL</li>
<li>SCROLL</li>
<li>SCROLL</li>
</ul>
</div>
</div>
CSS (relevant section)
.moving-article {
height: 150px;
width: 75%;
overflow-x: scroll;
}
.fixed-header {
background: rgba(0,0,0,0.5);
width: 50%;
text-align: center;
line-height: 40px;
position: absolute;
top: 0;
left: 0;
}
.container{
width: 1000px;
}
jQuery
var leftOffset = parseInt($(".fixed-header").css('left'));
$(window).scroll(function(){
$('.fixed-header').css({
'left': $(this).scrollLeft() + leftOffset
});
});
set the header's position to 'absolute', and it's parent container (which you want it to be relative to) to 'relative', and set it to stick to the top of the parent with 'top: 0'
CSS:
.container {
position: relative;
}
.child {
position: absolute;
top: 0;
}
To keep an element fixed within a parent cannot be done with position: fixed because position: fixed takes the element out of the flow and therefore it has no parent. It positions itself relative to the viewport.
To accomplish your goal, while keeping things simple and efficient, you may want to consider Tether, "a client-side library to make absolutely positioned elements attach to elements in the page efficiently".
Hope this helps. Good luck.
I want to add a always-on-top header like the new twitter does.
Explanation: When the user scrolls down the page, I want the header to stay on top of the window.
Somebody know a script that does that? Or can target me how can I do it?
You can use position: fixed; on the header.
<div id="header">
content goes here.
</div>
and the CSS:
#header { position: fixed; z-index: 9999; top: 0; left: 0; }
You need to give your header a position of fixed to make it visible throughout the page. And set the top value appropriately along with width.
Example:
#header{
position:'fixed';
top:0;
width:800px;
}
Use position:fixed on the header in its CSS.
Also, dont forget to set the left and top attributes to where you want it to go :)