I tried to put a position: fixed on the div ".ais-search-header", but it does not move while on scroll. I also try to drag it out from the parent div, but still did not work.
URL: https://kickegg0.myshopify.com/search.searchdata?q=q
Pass: tweast
There is a bug in Chrome and Firefox where position: fixed does not position relative to the screen when there is an ancestor element with the transform or backface-visibility attributes (or their webkit equivalents) set.
Move the element you want absolutely positioned above the elements with those attributes.
A position: fixed element has no dependency to its parent container. Its position actually depends on the browser window. That means it won't move or scroll on page scroll. It will be on top of the page. But those under that element will scroll according to the page. If you want to move the container according to scroll, give it position: absolute like:-
#parent {
position: relative;
}
#container {
position: absolute;
}
So that it will be inside the container and will move on page scroll.
Position 'fixed' positioning is based on your browser window so not move with scrolling. if you want to move with scrolling use position 'absolute'
Related
A position relative element can be positioned by using styles like
left:50px;
top: 50px;
etc, but how to position a sticky element before it acts as a fixed element ?
Using above mentioned styling is only coming into effect when the element acts like its fixed.
So I have a supposedly fixed-positioned element that I want to fix on the viewport at the top-right corner.
This is the HTML:
<div class = "header">
<p>This is a heading with an absolute position</p>
</div>
and the CSS:
.header {
position: absolute;
right:10px;
top: 10px;
}
It works as desired until you scroll to right with a laptop or zoom in with a mobile device. Either these two events will shift the element to left depending on the extent the events are.
I came up with 2 solutions:
1: make a div container at the top with the width as 100% and make the element relative to the container. This failed as when I scroll the window the container does not extend accordingly
2: add an event listener listening to two events scroll and touchend.
$(window).scroll(function(){
$(".header").css({"right": "10px", "top": "10px"});
});
$(document.body).bind("touchend", function(){
$(".header").css({"right": "10px", "top": "10px"});
});
I wanted to update the element at every selected event and make it always the same position relative to the viewport but this method failed too. Seems like the css will only position the element according to the original viewport
Is there a simple yet efficient solution for this issue?
If you are trying to anchor something to the viewport, use a fixed position:
position: fixed;
I have a div that has fixed position and bottom 0 to display at the bottom of the window.
My problem is when window resize, this div move to up and into other elements. For example when I open console box in chrome this div jump to other elements in facebook fix position such as friend list, when I open console box, element jump to up but hidden up element.
Please help me how I can fix div in window resize.
CSS Position Fixed:
Do not leave space for the element. Instead, position it at a
specified position relative to the screen's viewport and doesn't move
when scrolled. When printing, position it at that fixed position on
every page. Fixed positioning is similar to absolute positioning, with
the exception that the element's containing block is the viewport.
This is often used to create a floating element that stays in the same
position even after scrolling the page. - by Mozilla MDN
In other words, When you use position: fixed; that takes elements out of the document's regular flow.
How I can fix div in Window Re-size?
Solution: There's no way to do it as you want using CSS. You must remove position: fixed; because when you set bottom: 0px with position: fixed; to your element then it doesn't matter that what is the size (vertical) of your browser or window because position: fixed; element will always appear on the bottom of the viewport screen at 0px.
You can use
position: fixed
or
`position:absolute`
I have this off-canvas navigation: http://codepen.io/anon/pen/IcBis.
How do I make it scrollable like this one: http://codepen.io/jdigi/pen/nafJc ?
I only know how to make mine scrollable with scrollbar, but it still acts as a seperate element, rather than merged with rest of the body. Thanks!
Change the menus positioning from fixed to absolute. And to achieve full height, set the body's positioning to relative.
Updated code
You've (accidentally?) applied the fixed CSS rule to the #menu element.
The fixed CSS rule "nails" a block element to the viewport and keeps it from being scrollable.
This is ideal for watermarks but, I guess, not what you've intended.
Replace
#menu {
position: fixed;
with
#menu {
position: absolute;
That'll fix your problem.
I need to display an iframe when a user clicks on a link on header of page.
How do I make sure the iframe is always on top of all content? CSS z-indexs don't work effectively in this case.
z-index probably doesn't work because your iframe is not a positioned box:
For a positioned box, the 'z-index' property specifies:
The stack level of the box in the current stacking context.
Whether the box establishes a local stacking context.
Set its position to something other than static. For example:
iframe#myiframe {
z-index: 20;
position: absolute;
}
z-index only works on positioned content. Either use position:absolute; and top/left/right to position the element or use position:relative; to leave the element where it is.
Either one should enable z-index on the element.